/* ============================================================
   $PIPER — DESIGN TOKENS
   Palette: a near-monochrome EMERALD system on a deep forest-ink
   ground, with a single vermilion pop. The neutral is deliberately
   green-biased (chosen, not defaulted); the accent is emerald, not
   acid; boldness is spent once, on the red.
   Dark is the default. Light is a deliberate second state.
   Rule: nothing in this file references a component.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- Surface (forest ink) ---------- */
  --paper:    #0B1410;   /* the greenish ground */
  --paper-2:  #101C16;   /* panel */
  --paper-3:  #17251E;   /* raised */
  --seal-bg:  #040A07;   /* the coin field — near-black, faint green */

  /* ---------- Ink ---------- */
  --ink:      #E7EEEA;   /* off-white, faint green */
  --ink-2:    #9FB1A7;
  --ink-3:    #7E8F86;   /* ~4.9:1 on --paper */

  /* ---------- Brand ---------- */
  --brand:     #00C805;  /* Robinhood green — primary. ~8.8:1 on --paper */
  --brand-2:   #2FE06B;  /* refined emerald, for strokes + engraving */
  --brand-ink: #4FE888;  /* the readable twin, for text on dark */
  --on-brand:  #04140A;  /* text laid ON a brand fill */

  /* ---------- Danger (the one bold pop) ---------- */
  --danger:    #FF5A2C;
  --danger-2:  #FF7A50;

  /* ---------- Hairlines ---------- */
  --hair:     rgba(231, 238, 234, .10);
  --hair-2:   rgba(231, 238, 234, .20);
  --hair-3:   rgba(231, 238, 234, .42);

  /* ---------- Glow (restrained) ---------- */
  --glow:     rgba(28, 200, 90, .16);

  /* ---------- Texture ---------- */
  --noise-op:    .04;
  --noise-blend: screen;

  /* ---------- LEGACY ALIASES ----------
     Kept so older markup keeps resolving. Prefer the names above. */
  --gold:     var(--brand);
  --gold-2:   var(--brand-2);
  --gold-ink: var(--brand-ink);
  --blood:    var(--danger);
  --blood-2:  var(--danger-2);

  /* ---------- Type ---------- */
  --f-display: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style",
               Georgia, "Times New Roman", serif;
  --f-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  --f-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --t-hero:  clamp(2.7rem, 1.1rem + 6.4vw, 6.5rem);
  --t-h1:    clamp(2.1rem, 1.25rem + 3.5vw, 4rem);
  --t-h2:    clamp(1.65rem, 1.15rem + 2vw, 2.7rem);
  --t-h3:    clamp(1.2rem, 1.02rem + .85vw, 1.6rem);
  --t-lede:  clamp(1.06rem, .98rem + .5vw, 1.32rem);
  --t-body:  clamp(1rem, .96rem + .2vw, 1.08rem);
  --t-small: .8125rem;

  --lh-tight: 1.02;
  --lh-head:  1.12;
  --lh-body:  1.65;

  /* ---------- Space ---------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.5rem;  --sp-6: 2rem;
  --sp-7: 3rem;    --sp-8: 4.5rem;  --sp-9: 7rem;

  --pad:     clamp(1.15rem, .5rem + 2.5vw, 2.75rem);
  --maxw:    1180px;
  --maxw-nar: 780px;
  --measure: 66ch;

  /* ---------- Shape ---------- */
  --r-1: 3px;  --r-2: 8px;  --r-3: 16px;  --r-pill: 999px;

  --shadow-1: 0 1px 0 var(--hair), 0 14px 34px -22px #000;
  --shadow-2: 5px 6px 0 -1px var(--hair);
  --shadow-3: 0 0 0 1px var(--hair), 0 26px 60px -30px #000;

  /* ---------- Motion ---------- */
  --e-out:    cubic-bezier(.22, .68, .28, 1);
  --e-spring: cubic-bezier(.34, 1.42, .48, 1);
  --d-1: 170ms; --d-2: 340ms; --d-3: 640ms;

  /* ---------- Layering ---------- */
  --z-noise: 1;  --z-body: 2;  --z-parade: 40;  --z-nav: 50;
  --z-menu: 60;  --z-top: 90;
}

/* ============================================================
   LIGHT — an engraving on paper, still printed in green.
   Explicit opt-in via the toggle. Dark stays the default so the
   brand reads the same for everyone on first load.
   ============================================================ */

:root[data-theme="light"] {
  color-scheme: light;

  --paper:    #F1F5EF;   /* warm off-white, faint green bias */
  --paper-2:  #E7EDE4;
  --paper-3:  #DBE3D7;
  --seal-bg:  #06100B;

  --ink:      #0C130F;
  --ink-2:    #3A453F;
  --ink-3:    #5E6B63;   /* ~5.2:1 on --paper */

  --brand:     #00A804;
  --brand-2:   #00C805;
  --brand-ink: #0A6B26;  /* ~6.4:1 on --paper — use for TEXT */
  --on-brand:  #04140A;

  --danger:    #C63A16;  /* ~5:1 on --paper */
  --danger-2:  #FF5A2C;

  --hair:     rgba(12, 19, 15, .13);
  --hair-2:   rgba(12, 19, 15, .26);
  --hair-3:   rgba(12, 19, 15, .48);

  --glow:     rgba(0, 168, 4, .16);

  --noise-op:    .055;
  --noise-blend: multiply;

  --shadow-1: 0 1px 0 var(--hair), 0 14px 34px -22px rgba(14, 18, 16, .5);
  --shadow-2: 5px 6px 0 -1px var(--hair-2);
  --shadow-3: 0 0 0 1px var(--hair), 0 26px 60px -34px rgba(14, 18, 16, .6);
}