/* ==========================================================================
   BanSek Trade v2 — design tokens
   Paper and ink, made technical: a cool deep ink, dark --night bands, the
   brand green as a real accent and steel for technical labels. Values from
   the direction correction (2026-10-17 brief, A2); the test in
   build/verify/tokens.test.mjs pins them, so a drift fails the suite.

   The green has three forms, and the build enforces where each may go
   (build/guards.mjs):
     --lime       the bright brand green — on --night surfaces only
     --lime-ink   the green for text and underlines on paper (AA on --paper)
     --lime-soft  the green as a fill behind tags and active chips on paper
   ========================================================================== */

:root {
  /* Palette */
  --paper:      #F3F0EA;   /* page background — warm ivory, never pure white */
  --paper-2:    #E9E5DC;   /* cards, tiles, product backgrounds */
  --paper-3:    #D9D3C7;   /* hairlines, dividers, card borders */
  --ink:        #15191F;   /* headings, primary text — cool and deep */
  --ink-2:      #3E444D;   /* body text */
  --ink-3:      #7B828C;   /* captions, quiet labels, inactive options */
  --night:      #0F1216;   /* dark technical bands */
  --lime:       #CCF90C;   /* the brand green — ON NIGHT ONLY */
  --lime-ink:   #6E8A00;   /* the brand green for text/underlines on paper */
  --lime-soft:  #EAF5B8;   /* tag and badge fills on paper */
  /* Small green text on paper. --lime-ink is 3.5:1 on --paper — AA for
     lines, icons and large text only; small text needs 4.5:1. This is the
     same green, deeper: 5.3:1 on --paper, 4.8:1 on --paper-2, 5.2:1 on
     --lime-soft. */
  --lime-text:  #566B00;
  --steel:      #5B6B7A;   /* technical accent: spec labels, dividers, icons */
  --error:      #A3301E;   /* form errors only — 6.2:1 on --paper */

  /* Derived — translucent paper/night for overlays and the scrolled navbar */
  --paper-92:   rgb(243 240 234 / .92);
  --night-40:   rgb(15 18 22 / .40);
  --night-2:    #1A1F25;   /* raised surface on a night band */
  --night-line: rgb(243 240 234 / .14);   /* hairline on night */
  --hairline:   1px solid var(--paper-3);

  /* Shape */
  --r-hero: 24px;
  --r-tile: 16px;
  --r-pill: 999px;

  /* Type */
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Part, OE and reference numbers only — the .pn style (base.css). */
  --font-mono:  "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --fs-mono:    13px;
  --fs-body:    16px;
  --fs-micro:   11px;
  --fs-nav:     13px;
  --fs-h2:      clamp(36px, 5vw, 72px);
  --fs-h3:      clamp(24px, 2.6vw, 34px);
  --fs-word:    clamp(96px, 22vw, 320px);

  /* Layout */
  --gutter:   clamp(16px, 4vw, 40px);
  --inset:    clamp(8px, 1.2vw, 18px);   /* hero frame and night bands */
  --maxw:     1440px;
  --nav-h:    72px;
  --space-s:  clamp(16px, 2vw, 24px);
  --space-m:  clamp(32px, 4vw, 56px);
  --space-l:  clamp(56px, 7vw, 112px);

  /* Motion — slower and softer than v1 */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  300ms;
  --dur-mid:   420ms;
  --dur-slow:  900ms;
  --dur-xslow: 1200ms;

  /* Layers */
  --z-nav:     50;
  --z-float:   60;
  --z-overlay: 80;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  0.01ms;
    --dur-mid:   0.01ms;
    --dur-slow:  0.01ms;
    --dur-xslow: 0.01ms;
  }
}