/* ============================================================
   affordance-survey-site · design tokens
   「粉彩双档」 cool porcelain + cold ink; two-tier role triad —
   DEEP tier for text/links/buttons, PASTEL -fill tier for chart
   fills and decorative surfaces (FT tint technique).
   NOTE — the role token NAMES (--moss / --ochre / --terra) are
   legacy aliases kept for generated content: moss ≡ cornflower
   Ⅰ·perception, ochre ≡ celadon Ⅱ·reasoning, terra ≡ coral
   Ⅲ·action. The baked histogram uses the -fill tier.
   ============================================================ */
:root {
  color-scheme: light;

  /* -- porcelain & ink --------------------------------------- */
  --paper: #f7f8fa;
  --paper-deep: #eff2f6;      /* alt bands, cards */
  --paper-well: #e9edf2;      /* inset wells (pre, kbd) */
  --paper-elev: #ffffff;      /* figure mats, raised plates */
  --ink: #16181d;
  --ink-soft: #3a3f49;        /* long-form body */
  --ink-muted: #6a7280;       /* captions, meta */
  --ink-faint: #9aa1ac;       /* disabled, placeholders */
  --line: rgba(22, 24, 29, 0.16);
  --hairline: rgba(22, 24, 29, 0.09);
  --hairline-soft: rgba(22, 24, 29, 0.05);
  --border-strong: #c4cbd6;   /* topology edges, elevated borders */

  /* -- the three roles · DEEP tier (text / links / buttons) --- */
  --moss: #3d63c2;            /* Ⅰ   · perception — cornflower deep */
  --ochre: #2f8268;           /* Ⅱ  · reasoning — celadon deep */
  --terra: #c0473a;           /* Ⅲ · action — coral deep */
  --moss-deep: #2f4fa8;       /* pressed cornflower (primary button hover) */
  --terra-deep: #a63a2f;      /* deep coral (legacy slot, off-hero) */

  /* -- the three roles · PASTEL -fill tier (charts / decor) --- */
  --moss-fill: #6a93e8;
  --ochre-fill: #66bfa3;
  --terra-fill: #f0836f;
  --data-fill: #b6bcc6;       /* datasets series in the histogram */

  /* washes & rules derive from the pastel tier */
  --moss-soft: rgba(106, 147, 232, 0.14);
  --moss-line: rgba(106, 147, 232, 0.50);
  --ochre-soft: rgba(102, 191, 163, 0.16);
  --ochre-line: rgba(102, 191, 163, 0.55);
  --terra-soft: rgba(240, 131, 111, 0.14);
  --terra-line: rgba(240, 131, 111, 0.55);

  /* -- site accent: one cornflower voice for chrome ----------- */
  --accent: var(--moss);
  --accent-spark: #6fc2ff;    /* topology pulse gradient end — electric sky */
  --accent-volt: #2e5beb;     /* saturated pulse head, hero wires only */
  --topo-edge: #b3c1e2;       /* topology wire color, a blue cast over border-strong */
  --ghost-stroke: rgba(61, 99, 194, 0.22);  /* outlined ghost numerals (≡ --moss at 22%) */
  --ghost-fill: rgba(61, 99, 194, 0.14);    /* solid fallback when text-stroke is unsupported */

  /* role binding — sections/cards re-bind these */
  --role: var(--ink);
  --role-fill: var(--ink-faint);
  --role-soft: rgba(22, 24, 29, 0.08);
  --role-line: var(--line);

  /* -- type -------------------------------------------------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter Tight", "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --fs-hero: clamp(38px, 5.2vw, 76px);
  --fs-h2: clamp(32px, 4vw, 54px);
  --fs-h3: clamp(21px, 2.3vw, 28px);
  --fs-lead: clamp(18px, 1.7vw, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-mono: 13.5px;
  --fs-micro: 12.5px;

  --lh-tight: 1.04;
  --lh-snug: 1.25;
  --lh-body: 1.68;
  --track-wide: 0.14em;
  --track-wider: 0.22em;

  /* -- rhythm ------------------------------------------------ */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --container: 1200px;
  --pad: clamp(20px, 4vw, 56px);
  --section-gap: min(9vw, 136px);
  --nav-h: 60px;

  /* -- edges & depth ----------------------------------------- */
  --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-full: 999px;
  --shadow-soft: 0 1px 2px rgba(16, 32, 48, 0.04), 0 6px 24px rgba(16, 32, 48, 0.06);
  --shadow-lift: 0 2px 4px rgba(16, 32, 48, 0.05), 0 14px 44px rgba(16, 32, 48, 0.1);

  /* -- motion ------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0, 0.98);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 140ms; --d-base: 240ms; --d-slow: 420ms;

  /* -- aurora wash (hero backdrop: electric cornflower + sky,
     a breath of celadon lower-right — present, not shy) -------- */
  --aurora:
    radial-gradient(58% 52% at 14% 6%,  rgba(74, 120, 230, 0.20), transparent 62%),
    radial-gradient(46% 44% at 90% -4%, rgba(111, 194, 255, 0.20), transparent 60%),
    radial-gradient(50% 46% at 50% 116%, rgba(82, 176, 255, 0.13), transparent 66%),
    radial-gradient(60% 64% at 84% 94%, rgba(102, 191, 163, 0.10), transparent 64%);

  /* -- cool grain (feTurbulence, multiply; graphite tint) ----- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0 0.22 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}