/* Hallmark · component: tokens · genre: editorial · theme: Sifr Isfahan
 * Unified design tokens for the Isfahan visual system.
 * Source of truth — reconciles phase-02/shell.css, phase-marketing/prototype.html,
 * palette.html, and motion-direction.html into a single token block.
 *
 * When in doubt, motion-direction.html and palette.html are canonical for their
 * domains. Where shell.css (product) and the marketing prototype disagree on
 * durations, shell.css wins — product motion runs tighter than marketing motion.
 *
 * Pages migrate to this file one at a time. The old --accent/--text token block
 * inside frontend/assets/app.css stays in place until every page that imports it
 * has been ported off; do NOT delete that block as a side effect of a page port.
 */

:root {

  /* ── Brand · Isfahan palette ─────────────────────────────── */
  --cobalt:        #1b3a8a;
  --cobalt-deep:   #152c6b;
  --cobalt-ink:    #0e1a3a;
  --ultramarine:   #2852c4;
  --turquoise:     #2a8fa8;
  --turquoise-lt:  #6fbecb;
  --jade:          #3e8b7e;
  --saffron:       #c68a2e;
  --saffron-lt:    #e0b461;
  --saffron-bg:    #f9f1df;
  --clay:          #9a4a2f;
  --clay-deep:     #6f3220;   /* darkest risk tier · critical (deeper than clay/high) */
  --cream:         #f5eee0;
  --cream-2:       #ebe2d0;
  --paper:         #faf6ec;

  /* Saffron discipline — see handoff-review.html ch.4 note 02.
     Saffron is RATIONED. Only used for: (a) evidence-sealed moments,
     (b) primary marketing CTAs. Anywhere else, prefer --cobalt. */

  /* ── Product surface (cool greys for the admin app shell) ─ */
  --surface:       #ffffff;
  --surface-2:     #f7f8fa;
  --surface-3:     #eef0f4;
  --surface-rail:  #fafbfc;
  --rail-ink:      #0e1a3a;

  /* ── Marketing surface (warm paper for public pages) ─────── */
  --paper-soft:    #f6f4ed;

  /* ── Line work ───────────────────────────────────────────── */
  --line:          #e3e6ec;
  --line-2:        #d6dae2;
  --line-soft:     #eceef2;
  --rule:          rgba(14, 26, 58, 0.10);
  --rule-strong:   rgba(14, 26, 58, 0.16);

  /* ── Type tone ───────────────────────────────────────────── */
  --ink:           #0e1a3a;
  --ink-soft:      #2b3556;
  --muted:         #6a6f82;
  --muted-soft:    #8e92a0;

  /* ── Status (paired ink + bg for pills, banners, dots) ─────
     Warnings render saffron, matching the phase-02 design source
     (shell.css --status-warn). Risk severity ramp: low=jade,
     medium=saffron, high=clay (see shell.css .rsk.lo/.md/.hi). */
  --status-ok:        #3e8b7e;
  --status-ok-bg:     #e8f1ee;
  --status-warn:      #c68a2e;
  --status-warn-bg:   #f9f1df;
  --status-crit:      #9a4a2f;
  --status-crit-bg:   #f4e6e0;
  --status-info:      #2a8fa8;
  --status-info-bg:   #e3f0f3;

  /* ── Type families ───────────────────────────────────────── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ── Type scale ──────────────────────────────────────────── */
  --text-xs:        11px;
  --text-sm:        12.5px;
  --text-body:      14px;     /* product default · admin chrome */
  --text-body-lg:   15px;     /* marketing default */
  --text-lede:      18px;
  --text-h4:        20px;
  --text-h3:        clamp(22px, 2.4vw, 28px);
  --text-h2:        clamp(28px, 3.4vw, 40px);
  --text-h1:        clamp(34px, 4.6vw, 56px);
  --text-display:   clamp(46px, 6.6vw, 84px);

  --leading-tight:  1.06;
  --leading-snug:   1.2;
  --leading-body:   1.55;
  --leading-relax:  1.7;

  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-kicker:  0.14em;

  /* ── Spacing (4pt scale) ─────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(14, 26, 58, 0.06), 0 1px 1px rgba(14, 26, 58, 0.04);
  --shadow-md:  0 4px 12px rgba(14, 26, 58, 0.08);
  --shadow-lg:  0 18px 40px rgba(14, 26, 58, 0.14);

  /* ── Motion · durations ──────────────────────────────────── */
  /* From motion-direction.html ch.02 · canonical for product chrome.
     Marketing inflates these by ~1.5× on hero/sequence work; that's
     by design (longer reveals on first paint). Don't sync them. */
  --dur-xs:  120ms;    /* state snap   · chip press, checkbox toggle, link hover */
  --dur-s:   200ms;    /* micro fb     · hover lift, icon translate, shadow rise */
  --dur-m:   360ms;    /* transition   · panel expand, tab swap, status pill swap */
  --dur-l:   560ms;    /* reveal       · scroll-in, hero stagger, card appear */
  --dur-xl:  820ms;    /* sequence     · evidence assembly, connector flow */

  /* Marketing-only longer beats (hero stagger, code type-on) */
  --dur-marketing-l:   760ms;
  --dur-marketing-xl:  1100ms;

  /* ── Motion · easings ────────────────────────────────────── */
  --ease-standard:   cubic-bezier(.2, .65, .25, 1);
  --ease-enter:      cubic-bezier(0, .55, .35, 1);
  --ease-exit:       cubic-bezier(.4, 0, .7, .2);
  --ease-emphasize:  cubic-bezier(.2, .85, .2, 1);
}

/* ── Reduced-motion guard ──────────────────────────────────────
   Every page that imports tokens.css inherits this guard. Animations
   collapse to opacity-only crossfades ≤150ms. End-states must be
   visually correct without motion — see handoff-review.html ch.4
   note 06 (accessibility commitments). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-xs: 1ms;
    --dur-s:  1ms;
    --dur-m:  120ms;
    --dur-l:  120ms;
    --dur-xl: 120ms;
    --dur-marketing-l:  120ms;
    --dur-marketing-xl: 120ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
}