/* ============================================================
   SPECTARE · Color tokens
   A monochrome, editorial palette. Ink on warm paper.
   The "disruptive touch" is typographic, not chromatic —
   so colour stays out of the way. One restrained signal
   accent exists for moments that must cut through.
   ============================================================ */

:root {
  /* ---- Pure poles ---- */
  --pure-black: #000000;
  --pure-white: #ffffff;

  /* ---- Ink ramp (warm-neutral, near-black → near-white) ---- */
  --ink-900: #0c0b0a;   /* primary ink — text, dark surfaces */
  --ink-800: #1a1917;
  --ink-700: #2c2a27;
  --ink-600: #46433e;
  --ink-500: #6a665f;   /* muted text */
  --ink-400: #908b82;
  --ink-300: #b6b1a7;   /* borders on dark / disabled text */
  --ink-200: #d6d1c7;   /* hairline borders */
  --ink-150: #e4dfd6;
  --ink-100: #efeae1;   /* subtle fills */
  --ink-50:  #f6f2eb;   /* raised surface on paper */

  /* ---- Paper (warm off-white base) ---- */
  --paper:      #faf7f1;   /* app background */
  --paper-pure: #ffffff;   /* cards / elevated white */

  /* ---- Signal — the single disruptive accent. Use sparingly. ---- */
  --signal-600: #480909;   /* deepened — hover / pressed */
  --signal:     #5d0d0d;   /* the one accent: deep oxblood */
  --signal-200: #e7cccc;   /* tint — quiet backgrounds */

  /* ---- Functional states (muted, utilitarian) ---- */
  --positive:   #2f6f4f;
  --positive-100: #e2efe8;
  --caution:    #9a6a16;
  --caution-100: #f3e9d4;
  --critical:   #b22d1c;
  --critical-100: #f6ddd6;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-base:      var(--paper);
  --surface-card:      var(--paper-pure);
  --surface-raised:    var(--ink-50);
  --surface-sunken:    var(--ink-100);
  --surface-inverse:   var(--ink-900);
  --surface-overlay:   color-mix(in srgb, var(--ink-900) 55%, transparent);

  /* Text */
  --text-primary:      var(--ink-900);
  --text-secondary:    var(--ink-600);
  --text-muted:        var(--ink-500);
  --text-faint:        var(--ink-400);
  --text-inverse:      var(--paper);
  --text-on-signal:    var(--pure-white);

  /* Lines & borders */
  --border-hairline:   var(--ink-200);
  --border-strong:     var(--ink-900);
  --border-subtle:     var(--ink-150);
  --border-inverse:    var(--ink-700);

  /* Interactive (default = ink) */
  --interactive:       var(--ink-900);
  --interactive-hover: var(--ink-700);
  --focus-ring:        var(--ink-900);

  /* Brand */
  --brand-ink:   var(--ink-900);
  --brand-paper: var(--paper);
  --brand-accent: var(--signal);
}

/* ============================================================
   DARK SCOPE — ink ground, paper text.
   Apply .spectare-dark to any container to invert.
   ============================================================ */
.spectare-dark {
  --surface-base:    var(--ink-900);
  --surface-card:    var(--ink-800);
  --surface-raised:  var(--ink-700);
  --surface-sunken:  var(--pure-black);
  --surface-inverse: var(--paper);

  --text-primary:   var(--paper);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-500);
  --text-inverse:   var(--ink-900);

  --border-hairline: var(--ink-700);
  --border-strong:   var(--paper);
  --border-subtle:   var(--ink-800);

  --interactive:       var(--paper);
  --interactive-hover: var(--ink-200);
  --focus-ring:        var(--paper);

  color: var(--text-primary);
  background: var(--surface-base);
}