/* ============================================================
   ikojn × Hyphr — design tokens
   Direction: editorial operations console — Made-in-Kenya palette.

   * LIGHT (default): paper-cream surface (Asali-light), Choco type,
     real Asali/Nuru/Tan surface area on cards, Kheri + Asali accents.
     Reads like a printed ikojn supplement.
   * DARK (toggle):   warm-dusk Choco surface (NOT near-black), Bone type,
     Asali honey accents, paper-grain overlay.

   Chrome (left rail) stays warm-dark Choco in BOTH themes — the rail
   is the spine of the magazine; the canvas is the page. Per founder
   review (warm-earth tones should have surface area, not just accents).
   ============================================================ */

:root {
  /* ----- Brand earths — same in both themes (the moat) ----- */
  --asali:        #BD7F2E;   /* warm honey */
  --asali-bright: #DA9B40;
  --asali-soft:   rgba(189,127,46,0.18);
  --asali-pale:   #F0DDB1;   /* light surface tint */
  --asali-vivid:  #C28B3B;

  --kheri:        #8B3F2A;   /* terra */
  --kheri-bright: #B5563B;
  --kheri-soft:   rgba(139,63,42,0.14);

  --tan:          #B58961;
  --tan-pale:     #E8D5B6;

  --mustard:      #C9A227;
  --mustard-pale: #EFD984;

  --nuru:         #E6D4B7;   /* warm light */
  --nuru-pale:    #F6EAD0;

  --choco-rich:   #1A0F08;   /* the Choco anchor (text in light, surface in dark) */
  --choco-warm:   #2A1810;
  --choco-dark:   #221511;
  --bone:         #F1E5CC;   /* warm paper */
  --bone-warm:    #FAEED2;

  /* ----- Always-the-same on accent surfaces (theme-independent) ----- */
  --on-asali:    #1A0F08;   /* text on gold pills/buttons */
  --on-kheri:    #FAEED2;   /* text on red-terra */

  /* ============================================================
     LIGHT THEME — default (paper-cream supplement)
     ============================================================ */
  --surface:        #F5EAD3;   /* canvas page */
  --surface-card:   #FBF3E1;   /* raised paper card */
  --surface-deep:   #EBDEC0;   /* card gradient bottom */
  --surface-raised: #F8EBCE;   /* over-card / pressed */
  --surface-tint-asali:   #F0DDB1;  /* asali-tinted card surface area */
  --surface-tint-nuru:    #F6EAD0;
  --surface-tint-tan:     #ECDBC0;
  --surface-tint-mustard: #F0E5BE;

  --rule:           #C9A88A;   /* warm tan hairline */
  --rule-faint:     #DDC9A8;
  --rule-strong:    #A88862;

  --ink:            #1A0F08;   /* primary text — Choco */
  --ink-warm:       #2A1810;
  --ink-dim:        #4A2E1F;
  --ink-faint:      #8B6A4E;
  --ink-mute:       #B59A82;

  /* legacy aliases used throughout app.css — kept stable so we don't
     rename every reference; values are theme-correct. */
  --ink-anchor:   var(--surface);
  --ink-choco:    var(--surface-deep);
  --ink-deep:     var(--surface-card);
  --ink-raised:   var(--surface-raised);
  --bone:         var(--ink);            /* primary text — themed */
  --bone-warm:    var(--ink-warm);
  --bone-dim:     var(--ink-dim);
  --bone-faint:   var(--ink-faint);
  --bone-mute:    var(--ink-mute);

  --grain-opacity: 0.32;
  --grain-blend:   multiply;
  --grain-tint:    "0 0 0 0 0.78   0 0 0 0 0.62   0 0 0 0 0.40   0 0 0 0.38 0";

  --shadow-card:   0 1px 0 rgba(160,120,80,0.10), 0 8px 22px -10px rgba(120,80,40,0.18);
  --shadow-press:  0 12px 32px -14px rgba(120,80,40,0.30);

  /* Type */
  --f-display:    "Fraunces", "Caslon", "Georgia", serif;
  --f-sans:       "Geist", "Söhne", system-ui, -apple-system, sans-serif;
  --f-mono:       "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale */
  --t-mast:       clamp(2.8rem, 4.6vw, 4.4rem);
  --t-h1:         clamp(2.0rem, 3.0vw, 2.8rem);
  --t-h2:         clamp(1.4rem, 1.9vw, 1.7rem);
  --t-h3:         1.1rem;
  --t-body:       1.0rem;
  --t-small:      0.86rem;
  --t-micro:      0.74rem;

  /* Tracking */
  --tr-mast:      -0.012em;
  --tr-cap:       0.18em;
  --tr-mono:      0.02em;

  /* Space */
  --gap-1: 0.4rem;
  --gap-2: 0.8rem;
  --gap-3: 1.2rem;
  --gap-4: 1.8rem;
  --gap-5: 2.6rem;
  --gap-6: 3.6rem;

  /* Layout */
  --rail-w: 320px;
  --canvas-max: 1180px;

  /* Motion */
  --ease-out:  cubic-bezier(0.20, 0.80, 0.20, 1.00);
  --ease-in:   cubic-bezier(0.60, 0.04, 0.80, 0.40);

  /* Radii */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;

  color-scheme: light;
}

/* ============================================================
   DARK THEME — warm-dusk (the warmed-up dark; not "midnight gold")
   ============================================================ */
[data-theme="dark"] {
  --surface:        #2A1810;   /* warm dusk — not near-black */
  --surface-card:   #3A251B;
  --surface-deep:   #2F1E14;
  --surface-raised: #4A3023;
  --surface-tint-asali:   #4A2F18;
  --surface-tint-nuru:    #3A2A1C;
  --surface-tint-tan:     #3D2A1B;
  --surface-tint-mustard: #3F2E13;

  --rule:           #5A3F2D;
  --rule-faint:     #3D2B1F;
  --rule-strong:    #785638;

  --ink:            #F1E5CC;
  --ink-warm:       #FAEED2;
  --ink-dim:        #D9C5A4;
  --ink-faint:      #9F8A6E;
  --ink-mute:       #6E5E4B;

  --ink-anchor:   var(--surface);
  --ink-choco:    var(--surface-deep);
  --ink-deep:     var(--surface-card);
  --ink-raised:   var(--surface-raised);
  --bone:         var(--ink);
  --bone-warm:    var(--ink-warm);
  --bone-dim:     var(--ink-dim);
  --bone-faint:   var(--ink-faint);
  --bone-mute:    var(--ink-mute);

  --grain-opacity: 0.45;
  --grain-blend:   overlay;
  --grain-tint:    "0 0 0 0 0.85   0 0 0 0 0.75   0 0 0 0 0.55   0 0 0 0.32 0";

  --shadow-card:   0 1px 0 rgba(0,0,0,0.30), 0 14px 32px -18px rgba(0,0,0,0.55);
  --shadow-press:  0 18px 40px -16px rgba(0,0,0,0.65);

  color-scheme: dark;
}

/* Lining + tabular numerals everywhere */
* {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "ss01", "cv11", "tnum";
}