/* ============================================================
   refract — tokens.css · "The Receipt" design system (tokens-as-code)
   Brand direction P6-APPROVED by Ben 2026-07-19 ("מדהים!! תרוץ זריז זה יפה").
   Source of truth: products/refract/brand/direction-notes.md (Direction A).

   THESIS → IDENTITY: refract is the only AI video tool that shows its work.
   The receipt is the hero brand device. So the token system is built on ONE
   tension: a warm, editorial, LIGHT-FIRST paper canvas carrying lush cinematic
   film frames, each stamped with a crisp monospace receipt. Mono means "this is
   a verified fact," never decoration.

   DIVERGENCE (eval rule: no shared aesthetic across PRISM products) — every
   primary axis is the OPPOSITE of prism-site's "Glass Box":
     prism-site            refract
     near-black #0a0b0d     paper #F7F4EF        (dark  → light-first)
     mono EVERYWHERE        humanist sans body   (terminal → editorial)
     mono = the whole voice mono = facts only    (decoration → verification)
     radius 3px (square)    radius 12px / 4px     (unadorned → soft + crisp seal)
     green live-dot #34d97e seal #1FA971          (governance → verified-run)
   And diverges from Ofek (dense Hebrew-RTL analytics cockpit) and from the
   competitor set (Higgsfield neon-on-black / Artlist stock polish) — calm,
   editorial, material, not hyped/neon/maximal.

   Consumed by every future refract SaaS component & page. Real values,
   production-ready. Illustrative receipt data stays labeled (honesty rule).
   ============================================================ */

:root {
  /* ---- Color: light-first paper canvas + ink ---------------------------- */
  --paper:        #F7F4EF;   /* primary canvas — the divergence signature */
  --paper-2:      #FFFEFB;   /* raised surface / cards / the receipt tag */
  --paper-3:      #F0ECE4;   /* recessed wells, subtle fills */
  --ink:          #1A1714;   /* text, frame borders — warm near-black, not pure #000 */
  --ink-dim:      #6B635B;   /* secondary text (5.0:1 on --paper — WCAG AA) */
  --ink-faint:    #8C837A;   /* tertiary / captions on paper */

  --line:         rgba(26, 23, 20, 0.12);  /* hairline dividers */
  --line-2:       rgba(26, 23, 20, 0.22);  /* stronger borders, receipt frame */
  --line-dash:    rgba(26, 23, 20, 0.28);  /* the dashed receipt perforation */

  /* the verified seal — green means "real run recorded", NOT prism-site's #34d97e */
  --seal:         #1FA971;
  --seal-ink:     #14603F;   /* seal text on light for AA where needed */
  --seal-dim:     rgba(31, 169, 113, 0.14);
  --seal-ring:    rgba(31, 169, 113, 0.16);

  /* the refracted spectrum — the ONE accent, used sparingly: seal mark, live
     states, one word in the headline. Green→cyan→violet = light being split. */
  --spectrum:     linear-gradient(90deg, #1FA971 0%, #22B8C9 42%, #7C5CFF 100%);
  --spectrum-soft: linear-gradient(90deg, rgba(31,169,113,.12), rgba(124,92,255,.12));
  --violet:       #7C5CFF;   /* spectrum end-stop, for focus rings / live accents */
  --cyan:         #22B8C9;

  /* semantic — honesty-first, calm (no dark-pattern red urgency) */
  --warn:         #B4453B;   /* the "×" on the black-box column, error text */
  --warn-dim:     rgba(180, 69, 59, 0.10);
  --note:         #B47C1E;   /* "illustrative / sample" honesty markers */
  --note-dim:     rgba(180, 124, 30, 0.12);

  /* film stage — the cinematic frame interior (the only "dark" in the system,
     and only ever as CONTENT, never as the UI chrome — that's the whole point) */
  --stage-1:      #2b2f52;
  --stage-2:      #171826;
  --stage-3:      #0d0d15;
  --stage-glow-a: rgba(124, 92, 255, 0.28);
  --stage-glow-b: rgba(34, 184, 201, 0.22);
  --on-film:      rgba(255, 255, 255, 0.92);
  --on-film-dim:  rgba(255, 255, 255, 0.72);

  /* ---- Typography: humanist sans body, mono for FACTS ONLY -------------- */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  --text-micro:   0.6875rem;  /* 11px — receipt fine print, tags */
  --text-small:   0.8125rem;  /* 13px — captions, step body */
  --text-body:    1rem;       /* 16px */
  --text-lede:    clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  --text-h4:      1rem;
  --text-h3:      clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --text-h2:      clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  --text-hero:    clamp(2.3rem, 1.3rem + 4vw, 4.4rem);

  --weight-body:  400;
  --weight-med:   600;
  --weight-bold:  680;        /* headlines — confident, not heavy */

  --leading-hero: 1.02;
  --leading-tight: 1.2;
  --leading-body: 1.6;
  --tracking-hero: -0.03em;   /* tight editorial display */
  --tracking-tight: -0.02em;
  --tracking-mono: 0.02em;    /* mono breathes a touch */
  --tracking-eyebrow: 0.06em; /* uppercase mono eyebrows */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --section-y: clamp(3rem, 8vw, 6rem);
  --content-max: 1120px;
  --measure:  60ch;           /* prose line-length cap */

  /* ---- Radii: soft product, crisp receipt ------------------------------ */
  --radius:    12px;   /* cards, frames, buttons-large — the soft SaaS surface */
  --radius-sm: 8px;    /* buttons, inputs */
  --radius-r:  4px;    /* THE RECEIPT — deliberately crisper than everything else */
  --radius-pill: 999px;

  /* ---- Elevation: warm, low, paper-native (no glossy tech shadows) ------ */
  --shadow-1: 0 1px 2px rgba(26, 23, 20, 0.06);
  --shadow-2: 0 12px 30px -10px rgba(26, 23, 20, 0.18);
  --shadow-film: 0 30px 60px -30px rgba(26, 23, 20, 0.45);
  --shadow-receipt: 0 12px 30px -10px rgba(0, 0, 0, 0.28);

  /* ---- Motion: calm, honest (never a fake progress bar) ----------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --tick-duration: 1000ms;   /* the honest live cost/elapsed tick */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --tick-duration: 0ms; }
}

/* refract stays light-first by design. A dark theme is intentionally NOT
   shipped at brand stage — the light paper IS the identity. If a viewer
   forces dark, we keep the paper canvas rather than invert into prism-site's
   territory. (Documented choice, revisit at Spec if product needs a dark mode.) */