/* ============================================================
   isoBOLD — COLOR TOKENS
   A near-monochrome dark system with a single conservative gold
   accent. "Gold is a whisper — one key element per screen, never
   decoration." A pure-neutral OKLCH ramp (zero chroma) carries
   structure; the gold ramp is the only hue, plus a destructive red.

   Two surface families:
     • DARK  (primary)  — product UI, covers, sales briefs
     • PAPER (secondary)— technical documents, spec sheets, print
   ============================================================ */

:root {
  /* ---------- BASE NEUTRAL RAMP (OKLCH, zero chroma) ----------
     Authored as OKLCH (source of truth) with hex shipped alongside
     for tooling that needs it. Surfaces step UP in lightness as
     they come forward. */
  --neutral-0:   oklch(0.145 0 0);   /* #0A0A0C  canvas / near-black   */
  --neutral-50:  oklch(0.178 0 0);   /* #111114  raised canvas         */
  --neutral-100: oklch(0.205 0 0);   /* #15161A  card                  */
  --neutral-150: oklch(0.235 0 0);   /* #1C1D21  secondary surface     */
  --neutral-200: oklch(0.269 0 0);   /* #202127  popover / hover fill  */
  --neutral-400: oklch(0.556 0 0);   /* #5C606A  faint text / disabled */
  --neutral-500: oklch(0.620 0 0);   /* #6B7079  muted (on paper)      */
  --neutral-600: oklch(0.708 0 0);   /* #8A8E97  secondary text (dark) */
  --neutral-700: oklch(0.800 0 0);   /* #C7CAD1  bright secondary text */
  --neutral-900: oklch(0.970 0 0);   /* #F7F7F5  near-white            */
  --neutral-1000: oklch(0.985 0 0);  /* #FFFFFF  pure white            */

  /* hex mirrors (for SVG fills, canvas, mail clients) */
  --ink:          #0A0A0C;
  --ink-raised:   #111114;
  --ink-card:     #15161A;
  --ink-secondary:#1C1D21;
  --ink-popover:  #202127;

  /* ---------- GOLD RAMP — the only accent ---------- */
  --gold-100: #EFE2BF;   /* lightest — large fills on dark, highlights */
  --gold-300: #DDC382;   /* hover / bright accent type                 */
  --gold-500: #C9A24B;   /* BASE — the brand gold                      */
  --gold-700: #9C7B35;   /* accent type on paper, pressed             */
  --gold-900: #6F561F;   /* deepest — borders, shadowed edges         */

  /* ---------- DESTRUCTIVE ---------- */
  --destructive:     oklch(0.704 0.191 22.216);  /* #E5604D */
  --destructive-700: oklch(0.577 0.245 27.325);

  /* ============================================================
     SEMANTIC ALIASES — DARK (PRIMARY SURFACE)
     Default scope. Apply nothing, or .theme-dark, to use.
     ============================================================ */
  --bg:            var(--neutral-0);     /* page canvas              */
  --bg-raised:     var(--neutral-50);    /* raised section           */
  --surface-card:  var(--neutral-100);   /* cards, panels, sidebar   */
  --surface-2:     var(--neutral-150);   /* nested / secondary fill  */
  --surface-hover: var(--neutral-200);   /* row hover, popover, chips */

  --text-1: var(--neutral-1000);         /* headings, key figures    */
  --text-2: var(--neutral-700);          /* body on dark             */
  --text-3: var(--neutral-600);          /* secondary / captions     */
  --text-4: var(--neutral-400);          /* faint meta, footers      */

  --border:        oklch(1 0 0 / 0.10);  /* hairline white @ 10%     */
  --border-strong: oklch(1 0 0 / 0.16);  /* dividers, table rules    */
  --border-input:  oklch(1 0 0 / 0.15);  /* field borders            */

  --accent:        var(--gold-500);      /* the gold                 */
  --accent-bright: var(--gold-300);      /* hover / on-dark type     */
  --accent-soft:   rgba(201,162,75,0.12);/* faint gold wash          */
  --accent-line:   rgba(201,162,75,0.45);/* gold hairline / stamps   */
  --on-accent:     var(--neutral-0);     /* text on a gold fill      */

  --ring: oklch(0.556 0 0);              /* focus ring               */
}

/* ============================================================
   PAPER (SECONDARY SURFACE) — technical docs, spec sheets, print
   Apply .theme-paper on a container (or <html>) to flip.
   ============================================================ */
.theme-paper {
  --bg:            #E7E5DF;   /* warm desk / gallery backdrop */
  --bg-raised:     #FBFBF9;
  --surface-card:  #FFFFFF;   /* the sheet                    */
  --surface-2:     #FBFBF9;   /* inset figure boxes           */
  --surface-hover: #F2F0EA;

  --text-1: #15161A;          /* document ink                 */
  --text-2: #585C64;          /* body                         */
  --text-3: #6B7079;          /* secondary                    */
  --text-4: #A8ABB2;          /* faint meta / mono labels     */

  --border:        rgba(20,22,26,0.14);
  --border-strong: rgba(20,22,26,0.20);
  --border-input:  rgba(20,22,26,0.22);

  --accent:        var(--gold-500);
  --accent-bright: var(--gold-700);   /* gold reads darker on paper */
  --accent-soft:   rgba(201,162,75,0.14);
  --accent-line:   rgba(156,123,53,0.50);
  --on-accent:     var(--neutral-0);
}