/* v24 core/styles.css — FLATTENED 2026-08-08 (the @import shell 404'd its tokens on prod;
   this inlines every token file. Fonts: google import dropped per LAW 17 — families fall
   back to stacks; self-hosted reconciliation queued.) */

/* ===== tokens/colors.css ===== */
/* ============================================================
   SonSunny OS — Color tokens
   Semantic color roles (--ss-*) that every component reads.
   :root holds the DEFAULT theme (Aurora Noir, the flagship dark
   SaaS system). Each .theme-<slug> scope re-skins the SAME roles,
   so wrapping any subtree in a theme class re-themes it wholesale.
   Source of truth: design-refs/DESIGN-<slug>.md (SonSunny OS).
   ============================================================ */

:root {
  /* — accents — */
  --ss-primary:            #6D6AFE; /* the one action color */
  --ss-primary-hover:      #A78BFA;
  --ss-on-primary:         #0B0D12; /* text/icon on a primary fill */
  --ss-on-primary-hover:   #0B0D12;
  --ss-secondary:          #A78BFA;
  --ss-tertiary:           #34D8C4;
  --ss-neutral:            #8A90A2;
  /* text-safe accent — use for eyebrows/labels ON the page bg (always ≥4.5:1) */
  --ss-accent-text:        #6D6AFE;

  /* — surfaces — */
  --ss-bg:                 #0B0D12; /* page canvas */
  --ss-surface:            #14171F; /* card / panel */
  --ss-surface-alt:        #1C2030; /* raised or sunk step */
  --ss-on-surface:         #E7E9EE; /* primary text */
  --ss-on-surface-muted:   #A0A6B6; /* secondary text */
  --ss-border:             #262B3A; /* hairline */

  /* — status — */
  --ss-success:            #34D399;
  --ss-error:              #FB7185;
}

/* ---- Aurora Noir — dark · SaaS / fintech / AI (flagship default) ---- */
.theme-aurora-noir {
  --ss-primary:#6D6AFE; --ss-primary-hover:#A78BFA; --ss-on-primary:#0B0D12; --ss-on-primary-hover:#0B0D12;
  --ss-secondary:#A78BFA; --ss-tertiary:#34D8C4; --ss-neutral:#8A90A2; --ss-accent-text:#6D6AFE;
  --ss-bg:#0B0D12; --ss-surface:#14171F; --ss-surface-alt:#1C2030;
  --ss-on-surface:#E7E9EE; --ss-on-surface-muted:#A0A6B6; --ss-border:#262B3A;
  --ss-success:#34D399; --ss-error:#FB7185;
}

/* ---- Terra Warm — light · wellness / food / DTC / lifestyle ---- */
.theme-terra-warm {
  --ss-primary:#BC5331; --ss-primary-hover:#B4452F; --ss-on-primary:#FFFFFF; --ss-on-primary-hover:#FFFFFF;
  --ss-secondary:#6B7A5A; --ss-tertiary:#E0A458; --ss-neutral:#9B9082; --ss-accent-text:#A8482A;
  --ss-bg:#FAF4EC; --ss-surface:#FFFFFF; --ss-surface-alt:#F1E8DA;
  --ss-on-surface:#2B2620; --ss-on-surface-muted:#6E655A; --ss-border:#E4D8C6;
  --ss-success:#5E8C5A; --ss-error:#B4452F;
}

/* ---- Volt Pop — light · launches / apps / Gen-Z brands ---- */
.theme-volt-pop {
  --ss-primary:#C7F23D; --ss-primary-hover:#0A0A0A; --ss-on-primary:#0A0A0A; --ss-on-primary-hover:#C7F23D;
  --ss-secondary:#0A0A0A; --ss-tertiary:#5B5BFF; --ss-neutral:#6B6B6B; --ss-accent-text:#0A0A0A;
  --ss-bg:#F5F5F0; --ss-surface:#FFFFFF; --ss-surface-alt:#ECECE4;
  --ss-on-surface:#0A0A0A; --ss-on-surface-muted:#5A5A5A; --ss-border:#0A0A0A;
  --ss-success:#1FB873; --ss-error:#FF4D3D;
}

/* ---- Cosmic Luxe — dark · premium / film / AI / fintech ---- */
.theme-cosmic-luxe {
  --ss-primary:#9B6CFF; --ss-primary-hover:#4FD6FF; --ss-on-primary:#0A0712; --ss-on-primary-hover:#0A0712;
  --ss-secondary:#4FD6FF; --ss-tertiary:#FFD27A; --ss-neutral:#8A8FB0; --ss-accent-text:#9B6CFF;
  --ss-bg:#070611; --ss-surface:#10101E; --ss-surface-alt:#0A0A16;
  --ss-on-surface:#EEF1FF; --ss-on-surface-muted:#AEB2D6; --ss-border:#23233A;
  --ss-success:#5BE0B0; --ss-error:#FF6A8A;
}

/* ---- Synthwave — dark · music / gaming / events / creators ---- */
.theme-synthwave {
  --ss-primary:#FF3DF0; --ss-primary-hover:#22E0FF; --ss-on-primary:#0A0620; --ss-on-primary-hover:#0A0620;
  --ss-secondary:#22E0FF; --ss-tertiary:#FFC24A; --ss-neutral:#8E8DC0; --ss-accent-text:#FF3DF0;
  --ss-bg:#0A0620; --ss-surface:#140A33; --ss-surface-alt:#1A1145;
  --ss-on-surface:#EEF0FF; --ss-on-surface-muted:#A9A8D8; --ss-border:#2A1C5A;
  --ss-success:#39FF9E; --ss-error:#FF4D6D;
}

/* ---- Dream Soft — dark-pastel · wellness / beauty / kids / meditation ---- */
.theme-dream-soft {
  --ss-primary:#FF9FB8; --ss-primary-hover:#FFD9A8; --ss-on-primary:#3A2336; --ss-on-primary-hover:#3A2336;
  --ss-secondary:#C9B6FF; --ss-tertiary:#FFD9A8; --ss-neutral:#A8A3C4; --ss-accent-text:#FF9FB8;
  --ss-bg:#1B1630; --ss-surface:#251F3E; --ss-surface-alt:#2E2748;
  --ss-on-surface:#FBF7FF; --ss-on-surface-muted:#C8C2E0; --ss-border:#352E55;
  --ss-success:#9FE8C4; --ss-error:#FF8FA3;
}

/* ---- SaaS Light — light · B2B SaaS / dashboards / docs / dev tools ---- */
.theme-saas-light {
  --ss-primary:#4F46E5; --ss-primary-hover:#4338CA; --ss-on-primary:#FFFFFF; --ss-on-primary-hover:#FFFFFF;
  --ss-secondary:#0EA5E9; --ss-tertiary:#10B981; --ss-neutral:#64748B; --ss-accent-text:#4F46E5;
  --ss-bg:#F7F8FA; --ss-surface:#FFFFFF; --ss-surface-alt:#EEF1F6;
  --ss-on-surface:#0F172A; --ss-on-surface-muted:#5B6472; --ss-border:#E3E8EF;
  --ss-success:#16A34A; --ss-error:#DC2626;
}

/* ---- Ink Press — light · editorial / fashion / portfolio / magazine ---- */
.theme-ink-press {
  --ss-primary:#191919; --ss-primary-hover:#D43425; --ss-on-primary:#FAF9F4; --ss-on-primary-hover:#FAF9F4;
  --ss-secondary:#D43425; --ss-tertiary:#8A8A85; --ss-neutral:#8A8A85; --ss-accent-text:#191919;
  --ss-bg:#FAF9F4; --ss-surface:#FFFFFF; --ss-surface-alt:#F0EEE6;
  --ss-on-surface:#191919; --ss-on-surface-muted:#5C5A54; --ss-border:#DEDBD2;
  --ss-success:#3D7A4E; --ss-error:#C73E2E;
}

/* ---- Evergreen — dark · organic luxury / nature / outdoor / spirits ---- */
.theme-evergreen {
  --ss-primary:#D9A441; --ss-primary-hover:#E8BC60; --ss-on-primary:#0C1410; --ss-on-primary-hover:#0C1410;
  --ss-secondary:#5E8C5A; --ss-tertiary:#9FE8C4; --ss-neutral:#A3B3A6; --ss-accent-text:#D9A441;
  --ss-bg:#0C1410; --ss-surface:#14201A; --ss-surface-alt:#1B2B22;
  --ss-on-surface:#E9EFE9; --ss-on-surface-muted:#A3B3A6; --ss-border:#26382D;
  --ss-success:#7FBF8E; --ss-error:#E07856;
}

/* ---- Coast — light · travel / summer / consumer apps / hospitality ---- */
.theme-coast {
  --ss-primary:#FF6B5E; --ss-primary-hover:#E8503F; --ss-on-primary:#231512; --ss-on-primary-hover:#231512;
  --ss-secondary:#1FA8A0; --ss-tertiary:#FFC24A; --ss-neutral:#8A9AA4; --ss-accent-text:#C93A2B;
  --ss-bg:#FFF8F0; --ss-surface:#FFFFFF; --ss-surface-alt:#FFEFDE;
  --ss-on-surface:#27333A; --ss-on-surface-muted:#5E6E78; --ss-border:#F2DFC8;
  --ss-success:#1FA86F; --ss-error:#E8503F;
}


/* ===== tokens/dataviz.css ===== */
/* ============================================================
   SonSunny OS — Data-viz tokens
   A categorical palette for charts, separate from the semantic UI
   roles. Research-backed rules baked in:
   • 7-color cap (Berkeley/Carbon: ≤6–7 before switching to grouped
     bars / small multiples / a table).
   • Each step varies BOTH hue and luminance — never hue alone — so
     the sequence survives red-green color-vision deficiency.
   • Sequenced to maximize contrast between NEIGHBORING colors.
   • Tuned per background: the :root/dark set is brighter; light
     themes override with deeper, saturated hues that hold ≥3:1 on
     white (WCAG 1.4.11 non-text contrast).
   • --ss-viz-1 stays the brand action color so "primary series"
     reads consistently across the product.
   Consumers: assign colors in order; reserve gray (--ss-viz-muted)
   for "everything else" so one or two series can pop.
   ============================================================ */

:root {
  /* categorical sequence — dark backgrounds (Aurora Noir default) */
  --ss-viz-1: #6D6AFE; /* indigo  — brand/primary series */
  --ss-viz-2: #34D8C4; /* teal */
  --ss-viz-3: #FFC24A; /* amber */
  --ss-viz-4: #FB7185; /* rose */
  --ss-viz-5: #A78BFA; /* violet */
  --ss-viz-6: #4FD6FF; /* sky */
  --ss-viz-7: #9FE870; /* lime */

  /* chart furniture */
  --ss-viz-muted: #5B6173;  /* de-emphasized / "other" series */
  --ss-viz-grid:  color-mix(in srgb, var(--ss-on-surface) 12%, transparent);
  --ss-viz-axis:  color-mix(in srgb, var(--ss-on-surface) 30%, transparent);
  --ss-viz-track: color-mix(in srgb, var(--ss-on-surface) 9%, transparent); /* donut/progress empty */
}

/* light themes: deeper, more saturated so each holds on white/cream */
.theme-terra-warm, .theme-volt-pop, .theme-saas-light {
  --ss-viz-1: #4F46E5; /* indigo */
  --ss-viz-2: #0D9488; /* teal */
  --ss-viz-3: #D97706; /* amber */
  --ss-viz-4: #DB2777; /* pink */
  --ss-viz-5: #7C3AED; /* violet */
  --ss-viz-6: #0284C7; /* sky */
  --ss-viz-7: #65A30D; /* olive */
  --ss-viz-muted: #94A3B8;
}

/* warm light themes: lead with the brand-appropriate hue first */
.theme-terra-warm {
  --ss-viz-1: #BC5331; /* clay (brand) */
  --ss-viz-2: #6B7A5A; /* sage */
  --ss-viz-3: #E0A458; /* ochre */
  --ss-viz-4: #2F6E8C; /* slate-teal */
  --ss-viz-5: #9C5BA0; /* plum */
  --ss-viz-6: #4F46E5; /* indigo */
  --ss-viz-7: #65A30D; /* olive */
}

.theme-volt-pop {
  --ss-viz-1: #0A0A0A; /* ink (brand contrast) */
  --ss-viz-2: #5B5BFF; /* electric blue */
  --ss-viz-3: #E0552E; /* orange */
  --ss-viz-4: #1FB873; /* green */
  --ss-viz-5: #C026D3; /* magenta */
  --ss-viz-6: #0284C7; /* sky */
  --ss-viz-7: #A16207; /* bronze */
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   SonSunny OS — Typography tokens
   Each theme picks its own display + body families and tunes the
   display scale (size / weight / line-height / tracking / style)
   and label tracking — that's where each theme's voice lives.
   The lg / md / body / mono scale is shared for consistency.
   :root = Aurora Noir (Space Grotesk display + Inter body).
   ============================================================ */

:root {
  /* families */
  --ss-font-display: "Space Grotesk", system-ui, sans-serif;
  --ss-font-body:    "Inter", system-ui, sans-serif;
  --ss-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* display (the hero headline) */
  --ss-display-size:   64px;
  --ss-display-weight: 600;
  --ss-display-lh:     1.05;   /* @kind other */
  --ss-display-ls:     -0.03em;
  --ss-display-style:  normal;  /* @kind other */

  /* headline-lg / headline-md (shared scale) */
  --ss-h-lg-size:   40px;
  --ss-h-lg-weight: 600;
  --ss-h-lg-lh:     1.1;   /* @kind other */
  --ss-h-md-size:   24px;
  --ss-h-md-weight: 500;
  --ss-h-md-lh:     1.25;   /* @kind other */

  /* body */
  --ss-body-lg-size: 18px;
  --ss-body-md-size: 16px;
  --ss-body-lh:      1.6;   /* @kind other */

  /* label / eyebrow */
  --ss-label-size:   14px;
  --ss-label-weight: 500;
  --ss-label-lh:     1.4;   /* @kind other */
  --ss-label-ls:     0.01em;
}

.theme-aurora-noir {
  --ss-font-display:"Space Grotesk",system-ui,sans-serif; --ss-font-body:"Inter",system-ui,sans-serif;
  --ss-display-size:64px; --ss-display-weight:600; --ss-display-ls:-0.03em;
  --ss-display-lh:1.05; /* @kind other */
  --ss-display-style:normal; /* @kind other */
  --ss-label-ls:0.01em;
}

.theme-terra-warm {
  --ss-font-display:"Fraunces",Georgia,serif; --ss-font-body:"Work Sans",system-ui,sans-serif;
  --ss-display-size:60px; --ss-display-weight:600; --ss-display-ls:-0.01em;
  --ss-display-lh:1.08; /* @kind other */
  --ss-display-style:normal; /* @kind other */
  --ss-body-lh:1.7; /* @kind other */
  --ss-label-weight:600; --ss-label-ls:0.02em;
}

.theme-volt-pop {
  --ss-font-display:"Archivo",system-ui,sans-serif; --ss-font-body:"Inter",system-ui,sans-serif;
  --ss-display-size:80px; --ss-display-weight:800; --ss-display-ls:-0.04em;
  --ss-display-lh:0.98; /* @kind other */
  --ss-display-style:normal; /* @kind other */
  --ss-body-lh:1.55; /* @kind other */
  --ss-h-lg-weight:700; --ss-label-weight:700; --ss-label-ls:0.04em;
}

.theme-cosmic-luxe {
  --ss-font-display:"Space Grotesk",system-ui,sans-serif; --ss-font-body:"Inter",system-ui,sans-serif;
  --ss-display-size:64px; --ss-display-weight:600; --ss-display-ls:-0.02em;
  --ss-display-lh:1.0; /* @kind other */
  --ss-display-style:normal; /* @kind other */
  --ss-body-lh:1.65; /* @kind other */
  --ss-label-size:13px; --ss-label-weight:600; --ss-label-ls:0.16em;
}

.theme-synthwave {
  --ss-font-display:"Anton",system-ui,sans-serif; --ss-font-body:"Inter",system-ui,sans-serif;
  --ss-display-size:72px; --ss-display-weight:400; --ss-display-ls:0.01em;
  --ss-display-lh:0.96; /* @kind other */
  --ss-display-style:normal; /* @kind other */
  --ss-h-lg-weight:400; --ss-label-size:13px; --ss-label-weight:600; --ss-label-ls:0.12em;
}

.theme-dream-soft {
  --ss-font-display:"Fraunces",Georgia,serif; --ss-font-body:"Inter",system-ui,sans-serif;
  --ss-display-size:58px; --ss-display-weight:500; --ss-display-ls:-0.01em;
  --ss-display-lh:1.05; /* @kind other */
  --ss-display-style:italic; /* @kind other */
  --ss-body-lh:1.75; /* @kind other */
  --ss-h-lg-weight:500; --ss-label-size:13px; --ss-label-weight:600; --ss-label-ls:0.14em;
}

.theme-saas-light {
  --ss-font-display:"Inter",system-ui,sans-serif; --ss-font-body:"Inter",system-ui,sans-serif;
  --ss-display-size:56px; --ss-display-weight:700; --ss-display-ls:-0.025em;
  --ss-display-lh:1.05; /* @kind other */
  --ss-display-style:normal; /* @kind other */
  --ss-h-lg-weight:700; --ss-body-md-size:15px; --ss-label-size:12px; --ss-label-weight:600; --ss-label-ls:0.06em;
}

.theme-ink-press {
  --ss-font-display:"DM Serif Display",Georgia,serif; --ss-font-body:"Inter",system-ui,sans-serif;
  --ss-display-size:66px; --ss-display-weight:400; --ss-display-ls:-0.01em;
  --ss-display-lh:1.02; /* @kind other */
  --ss-display-style:normal; /* @kind other */
  --ss-h-lg-weight:400; --ss-body-lh:1.7; /* @kind other */
  --ss-label-size:12px; --ss-label-weight:600; --ss-label-ls:0.18em;
}

.theme-evergreen {
  --ss-font-display:"Fraunces",Georgia,serif; --ss-font-body:"Work Sans",system-ui,sans-serif;
  --ss-display-size:60px; --ss-display-weight:500; --ss-display-ls:-0.01em;
  --ss-display-lh:1.06; /* @kind other */
  --ss-display-style:normal; /* @kind other */
  --ss-h-lg-weight:500; --ss-body-lh:1.7; /* @kind other */
  --ss-label-size:13px; --ss-label-weight:600; --ss-label-ls:0.14em;
}

.theme-coast {
  --ss-font-display:"Archivo",system-ui,sans-serif; --ss-font-body:"Inter",system-ui,sans-serif;
  --ss-display-size:62px; --ss-display-weight:700; --ss-display-ls:-0.02em;
  --ss-display-lh:1.04; /* @kind other */
  --ss-display-style:normal; /* @kind other */
  --ss-h-lg-weight:700; --ss-body-lh:1.6; /* @kind other */
  --ss-label-weight:600; --ss-label-ls:0.05em;
}


/* ===== tokens/rhythm.css ===== */
/* ============================================================
   SonSunny OS — Editorial rhythm tokens
   The structural layer under typography: a baseline grid, a
   modular type scale, and vertical rhythm. Where typography.css
   sets each theme's VOICE (families, display tuning), this sets
   the STRUCTURE every theme shares — the invisible grid that makes
   long-form text and dense layouts feel composed rather than
   assembled. Borrowed from editorial / book design.

   - Baseline: the single vertical unit everything snaps to.
   - Modular scale: type sizes derived from one ratio, not picked.
   - Vertical rhythm: leading + margins expressed in baselines.
   ============================================================ */

:root {
  /* ---- baseline grid ---------------------------------------
     One unit. 4px snaps with the spacing ramp (4·8·16·32…).
     --ss-baseline-2 is the line grid most body text sits on. */
  --ss-baseline:    4px;
  --ss-baseline-2:  8px;
  --ss-baseline-3:  12px;
  --ss-baseline-6:  24px;   /* default line box for body */

  /* ---- modular scale ---------------------------------------
     Every step = previous × ratio, rounded to the baseline.
     :root uses Perfect Fourth (1.333) — a confident editorial
     ratio. Themes can re-tune the ratio + the derived steps. */
  --ss-scale-ratio: 1.333;  /* @kind other */
  --ss-scale-base:  16px;          /* step 0 = body */

  --ss-scale--1: 12px;   /* base ÷ ratio  → captions, fine print */
  --ss-scale-0:  16px;   /* body                                 */
  --ss-scale-1:  21px;   /* base × ratio  → lead, h5             */
  --ss-scale-2:  28px;   /* h4                                   */
  --ss-scale-3:  37px;   /* h3                                   */
  --ss-scale-4:  50px;   /* h2                                   */
  --ss-scale-5:  66px;   /* h1 / display                         */

  /* ---- vertical rhythm -------------------------------------
     Leading + block spacing in baseline multiples. The measure
     is the ideal line length for sustained reading (66ch). */
  --ss-leading-body:    24px;  /* 6 baselines  @kind other */
  --ss-leading-tight:   20px;  /* 5 baselines  @kind other */
  --ss-rhythm-block:    24px;  /* paragraph spacing = 1 line */
  --ss-rhythm-section:  48px;  /* between sections = 2 lines */
  --ss-measure:         66ch;  /* @kind other */
  --ss-measure-narrow:  52ch;  /* @kind other */
}

/* Volt Pop — louder, tighter display ratio (Major Third feels
   too gentle for a poster voice; it uses Golden for drama). */
.theme-volt-pop {
  --ss-scale-ratio: 1.5;  /* @kind other */
  --ss-scale-1: 24px; --ss-scale-2: 36px; --ss-scale-3: 54px;
  --ss-scale-4: 80px; --ss-scale-5: 120px;
}

/* Ink Press & Evergreen — book-like, gentler Minor Third so the
   long-form scale steps stay close and the measure reads calm. */
.theme-ink-press,
.theme-evergreen {
  --ss-scale-ratio: 1.2;  /* @kind other */
  --ss-scale-1: 19px; --ss-scale-2: 23px; --ss-scale-3: 28px;
  --ss-scale-4: 33px; --ss-scale-5: 40px;
  --ss-leading-body: 28px;  /* 7 baselines — roomier  @kind other */
  --ss-measure: 60ch;  /* @kind other */
}

/* Dream Soft — airy editorial; wide leading, narrow measure. */
.theme-dream-soft {
  --ss-leading-body: 30px;  /* @kind other */
  --ss-measure: 56ch;  /* @kind other */
}

@media (prefers-reduced-motion) {
  /* no motion here — rhythm is static structure */
}


/* ===== tokens/radius.css ===== */
/* ============================================================
   SonSunny OS — Radius tokens
   Corner language per theme: from near-sharp (Volt Pop, 2/4px,
   poster-like) to the softest (Dream Soft, 26/36px). Buttons are
   pill (full) in the soft/premium themes, near-sharp in Volt.
   :root = Aurora Noir (soft-but-crisp).
   ============================================================ */

:root {
  --ss-radius-none: 0px;
  --ss-radius-sm:   6px;
  --ss-radius-md:   10px;
  --ss-radius-lg:   16px;
  --ss-radius-xl:   24px;
  --ss-radius-full: 9999px;
  /* the radius a button uses in this theme (pill vs crisp) */
  --ss-radius-button: 10px;
}

.theme-aurora-noir { --ss-radius-sm:6px;  --ss-radius-md:10px; --ss-radius-lg:16px; --ss-radius-xl:24px; --ss-radius-button:10px; }
.theme-terra-warm  { --ss-radius-sm:8px;  --ss-radius-md:14px; --ss-radius-lg:22px; --ss-radius-xl:32px; --ss-radius-button:9999px; }
.theme-volt-pop    { --ss-radius-sm:2px;  --ss-radius-md:4px;  --ss-radius-lg:8px;  --ss-radius-xl:12px; --ss-radius-button:2px; }
.theme-cosmic-luxe { --ss-radius-sm:8px;  --ss-radius-md:14px; --ss-radius-lg:20px; --ss-radius-xl:28px; --ss-radius-button:9999px; }
.theme-synthwave   { --ss-radius-sm:6px;  --ss-radius-md:10px; --ss-radius-lg:16px; --ss-radius-xl:22px; --ss-radius-button:9999px; }
.theme-dream-soft  { --ss-radius-sm:10px; --ss-radius-md:18px; --ss-radius-lg:26px; --ss-radius-xl:36px; --ss-radius-button:9999px; }
.theme-saas-light  { --ss-radius-sm:6px;  --ss-radius-md:10px; --ss-radius-lg:16px; --ss-radius-xl:24px; --ss-radius-button:10px; }
.theme-ink-press   { --ss-radius-sm:0px;  --ss-radius-md:2px;  --ss-radius-lg:4px;  --ss-radius-xl:8px;  --ss-radius-button:0px; }
.theme-evergreen   { --ss-radius-sm:8px;  --ss-radius-md:14px; --ss-radius-lg:20px; --ss-radius-xl:28px; --ss-radius-button:9999px; }
.theme-coast       { --ss-radius-sm:12px; --ss-radius-md:18px; --ss-radius-lg:26px; --ss-radius-xl:34px; --ss-radius-button:9999px; }


/* ===== tokens/spacing.css ===== */
/* ============================================================
   SonSunny OS — Spacing tokens
   A single shared spacing ramp across all themes (the rhythm is a
   constant; only the surface dressing changes). Volt Pop widens
   the section gap (2xl) for poster-like air between blocks.
   Step ratio is roughly geometric: 4 · 8 · 16 · 32 · 64 · 96.
   ============================================================ */

:root {
  --ss-space-xs:  4px;
  --ss-space-sm:  8px;
  --ss-space-md:  16px;
  --ss-space-lg:  32px;
  --ss-space-xl:  64px;
  --ss-space-2xl: 96px;
}

.theme-volt-pop { --ss-space-2xl: 112px; }


/* ===== tokens/density.css ===== */
/* ============================================================
   SonSunny OS — Density modes
   One attribute, three rhythms. Set data-density on any wrapper
   (or <body>) to re-scope the control + row padding the components
   read. Comfortable is the default; compact is for data-dense
   surfaces (tables, settings, dashboards), spacious for marketing
   or touch-first views.

       <div data-density="compact"> … </div>

   Components fall back to their literal padding when no density
   scope is present, so this layer is purely additive — nothing
   changes until you opt a subtree in.
   ============================================================ */

:root {
  /* vertical padding for default (md) controls — Button, Input */
  --ss-density-control-py: 12px; /* @kind spacing */
  /* horizontal padding for default (md) controls */
  --ss-density-control-px: 20px; /* @kind spacing */
  /* vertical padding for table / list rows */
  --ss-density-row-py:     12px; /* @kind spacing */
  /* label→field gap inside a form field */
  --ss-density-field-gap:  6px;  /* @kind spacing */
}

/* Compact — maximize rows on screen; data tables, settings, admin. */
[data-density="compact"] {
  --ss-density-control-py: 8px;  /* @kind spacing */
  --ss-density-control-px: 16px; /* @kind spacing */
  --ss-density-row-py:     7px;  /* @kind spacing */
  --ss-density-field-gap:  4px;  /* @kind spacing */
}

/* Spacious — air for marketing, onboarding, touch-first layouts. */
[data-density="spacious"] {
  --ss-density-control-py: 15px; /* @kind spacing */
  --ss-density-control-px: 24px; /* @kind spacing */
  --ss-density-row-py:     17px; /* @kind spacing */
  --ss-density-field-gap:  9px;  /* @kind spacing */
}


/* ===== tokens/breakpoints.css ===== */
/* ============================================================
   SonSunny OS — Breakpoints & responsive scale
   The shared responsive vocabulary. Five named widths plus the
   fluid clamp() tokens that let type and gutters scale smoothly
   *between* breakpoints instead of jumping at them.

   Custom properties can't be read inside a `@media (...)` test, so
   the px values below are the canonical SOURCE OF TRUTH — copy the
   number into media queries, and use the tokens directly in
   container queries, calc(), and JS (getComputedStyle).

   Ladder (min-width, mobile-first):
     sm  480   large phone / small tablet portrait
     md  768   tablet portrait — sidebar collapses below here
     lg  1024  tablet landscape / small laptop
     xl  1280  desktop — the design canvas width
     2xl 1536  wide desktop / dashboard multi-pane
   ============================================================ */

:root {
  /* Named breakpoint widths (source of truth for media queries). */
  --ss-bp-sm:  480px;   /* @kind other */
  --ss-bp-md:  768px;   /* @kind other */
  --ss-bp-lg:  1024px;  /* @kind other */
  --ss-bp-xl:  1280px;  /* @kind other */
  --ss-bp-2xl: 1536px;  /* @kind other */

  /* Content measure caps — the max readable line / container width. */
  --ss-measure-prose: 68ch;  /* @kind other */
  --ss-container-sm:  640px;  /* @kind spacing */
  --ss-container-md:  768px;  /* @kind spacing */
  --ss-container-lg:  1024px; /* @kind spacing */
  --ss-container-xl:  1200px; /* @kind spacing */

  /* Fluid gutter — page padding that grows with the viewport.
     Floor 16px @ ~360px, ceiling 64px @ ~1536px. */
  --ss-fluid-gutter: clamp(16px, 4vw, 64px);   /* @kind spacing */
  /* Fluid section rhythm — vertical space between major blocks. */
  --ss-fluid-section: clamp(48px, 9vw, 128px); /* @kind spacing */

  /* Fluid display type — hero headline that scales with the viewport.
     ~28px on a phone up to ~64px on a wide desktop. */
  --ss-fluid-display: clamp(1.75rem, 1rem + 3.4vw, 4rem);  /* @kind other */
  /* Fluid title — section headings, ~22px → ~36px. */
  --ss-fluid-title:   clamp(1.375rem, 1rem + 1.6vw, 2.25rem); /* @kind other */
}


/* ===== tokens/motion.css ===== */
/* ============================================================
   SonSunny OS — Elevation & Motion tokens
   Two concerns:
   1) ELEVATION — how depth reads per theme. Light themes use soft
      tinted shadows + tonal steps; dark themes use accent GLOW
      (a colored bloom), never muddy gray drop-shadows.
   2) MOTION / FX — the contract into the FX Combo System
      (see FX-COMBO-SYSTEM.md). --ss-fx-preset + --ss-fx-palette
      let any theme wear any motion; --ss-ease/-dur/-stagger drive
      CSS reveal + hover timing.
   ============================================================ */

:root {
  /* elevation — glow-based (dark default) */
  --ss-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --ss-shadow:    0 18px 50px -24px rgba(0,0,0,.7);
  --ss-glow:      0 0 0 1px color-mix(in srgb, var(--ss-primary) 30%, transparent),
                  0 8px 40px -10px color-mix(in srgb, var(--ss-primary) 45%, transparent);

  /* motion / FX */
  --ss-fx-preset:  cosmic;   /* @kind other */
  --ss-fx-palette: "109,106,254|167,139,250|52,216,196";   /* @kind other */
  --ss-fx-density: 1;   /* @kind other */

  /* CSS timing — semantic duration scale: instant·fast·base·slow·slower (components read --ss-dur / --ss-dur-slow) */
  --ss-dur-instant: .08s;   /* @kind other */
  --ss-dur-fast:    .12s;   /* @kind other */
  --ss-dur:         .18s;   /* @kind other */
  --ss-dur-slow:    .4s;    /* @kind other */
  --ss-dur-slower:  .7s;    /* @kind other */
  --ss-stagger:     60ms;   /* @kind other */

  /* easing set — standard / in / out / spring(overshoot) / emphasized(sharp) */
  --ss-ease:           cubic-bezier(.2,.8,.2,1);     /* @kind other */
  --ss-ease-in:        cubic-bezier(.4,0,1,1);       /* @kind other */
  --ss-ease-out:       cubic-bezier(0,0,.2,1);       /* @kind other */
  --ss-ease-spring:    cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --ss-ease-emphasized:cubic-bezier(.2,0,0,1);       /* @kind other */

  /* depth — the Z atom for 3D motion (SonSunnyMotion mode:'3d'). 2D is the
     z=0 projection of the same 6-axis vector, so this only reads in 3D. */
  --ss-perspective: 800px;   /* @kind other */
}

.theme-aurora-noir {
  --ss-shadow-sm:0 1px 2px rgba(0,0,0,.4); --ss-shadow:0 18px 50px -24px rgba(0,0,0,.7);
  --ss-fx-palette:"109,106,254|167,139,250|52,216,196";
  --ss-fx-preset:aurora; /* @kind other */
  --ss-dur:.18s; /* @kind other */
  --ss-dur-slow:.4s; /* @kind other */
}
.theme-terra-warm {
  --ss-shadow-sm:0 8px 22px -14px rgba(110,80,50,.30); --ss-shadow:0 18px 40px -18px rgba(110,80,50,.28);
  --ss-glow:0 10px 30px -16px rgba(200,96,60,.45);
  --ss-fx-palette:"200,96,60|107,122,90|224,164,88";
  --ss-fx-preset:none; /* @kind other */
  --ss-dur:.2s; /* @kind other */
  --ss-dur-slow:.45s; /* @kind other */
}
.theme-volt-pop {
  /* neo-brutalist: hard offset ink shadow, no blur */
  --ss-shadow-sm:3px 3px 0 0 #0A0A0A; --ss-shadow:6px 6px 0 0 #0A0A0A;
  --ss-glow:6px 6px 0 0 #0A0A0A;
  --ss-fx-palette:"199,242,61|91,91,255|10,10,10";
  --ss-fx-preset:waves; /* @kind other */
  --ss-dur:.12s; /* @kind other */
  --ss-dur-slow:.24s; /* @kind other */
}
.theme-cosmic-luxe {
  --ss-shadow-sm:0 1px 2px rgba(0,0,0,.5); --ss-shadow:0 24px 70px -30px rgba(0,0,0,.85);
  --ss-fx-palette:"255,207,106|79,214,255|155,108,255";
  --ss-fx-preset:cosmic; /* @kind other */
  --ss-dur:.22s; /* @kind other */
  --ss-dur-slow:.5s; /* @kind other */
}
.theme-synthwave {
  --ss-shadow-sm:0 0 12px -2px color-mix(in srgb,var(--ss-primary) 60%, transparent);
  --ss-shadow:0 0 40px -6px color-mix(in srgb,var(--ss-primary) 55%, transparent);
  --ss-glow:0 0 0 1px color-mix(in srgb,var(--ss-primary) 50%, transparent),0 0 30px -4px color-mix(in srgb,var(--ss-primary) 70%, transparent);
  --ss-fx-palette:"255,61,240|34,224,255|130,90,255";
  --ss-fx-preset:rain; /* @kind other */
  --ss-dur:.16s; /* @kind other */
  --ss-dur-slow:.35s; /* @kind other */
}
.theme-dream-soft {
  --ss-shadow-sm:0 10px 30px -18px rgba(0,0,0,.5); --ss-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  --ss-glow:0 0 50px -10px color-mix(in srgb,var(--ss-primary) 40%, transparent);
  --ss-fx-palette:"255,201,163|255,182,200|201,182,255";
  --ss-fx-preset:bokeh; /* @kind other */
  --ss-dur:.4s; /* @kind other */
  --ss-dur-slow:.7s; /* @kind other */
}
.theme-saas-light {
  --ss-shadow-sm:0 1px 2px rgba(15,23,42,.06); --ss-shadow:0 8px 24px -12px rgba(15,23,42,.18);
  --ss-glow:0 0 0 3px color-mix(in srgb,var(--ss-primary) 18%, transparent);
  --ss-fx-palette:"79,70,229|14,165,233|16,185,129";
  --ss-fx-preset:bokeh; /* @kind other */
  --ss-fx-density:.6; /* @kind other */
  --ss-dur:.16s; /* @kind other */
  --ss-dur-slow:.3s; /* @kind other */
}
.theme-ink-press {
  /* editorial: flat paper, hairline rules, almost no motion */
  --ss-shadow-sm:0 1px 0 0 #DEDBD2; --ss-shadow:0 12px 32px -20px rgba(25,25,25,.25);
  --ss-glow:0 0 0 2px color-mix(in srgb,var(--ss-secondary) 30%, transparent);
  --ss-fx-palette:"25,25,25|212,52,37|138,138,133";
  --ss-fx-preset:none; /* @kind other */
  --ss-dur:.22s; /* @kind other */
  --ss-dur-slow:.45s; /* @kind other */
}
.theme-evergreen {
  /* deep forest: warm brass glow over near-black green */
  --ss-shadow-sm:0 1px 2px rgba(0,0,0,.4); --ss-shadow:0 22px 60px -26px rgba(0,0,0,.75);
  --ss-glow:0 0 0 1px color-mix(in srgb,var(--ss-primary) 35%, transparent),0 8px 36px -8px color-mix(in srgb,var(--ss-primary) 40%, transparent);
  --ss-fx-palette:"217,164,65|94,140,90|159,232,196";
  --ss-fx-preset:fireflies; /* @kind other */
  --ss-dur:.24s; /* @kind other */
  --ss-dur-slow:.5s; /* @kind other */
}
.theme-coast {
  /* sunny: soft warm shadows, gentle waves */
  --ss-shadow-sm:0 6px 18px -12px rgba(120,70,40,.25); --ss-shadow:0 18px 44px -20px rgba(120,70,40,.28);
  --ss-glow:0 10px 32px -14px color-mix(in srgb,var(--ss-primary) 50%, transparent);
  --ss-fx-palette:"255,107,94|31,168,160|255,194,74";
  --ss-fx-preset:waves; /* @kind other */
  --ss-fx-density:.7; /* @kind other */
  --ss-dur:.18s; /* @kind other */
  --ss-dur-slow:.4s; /* @kind other */
}

/* ============================================================
   MOTION PERSONALITY — each theme gets its own easing curve, so the
   same component feels different per skin: Volt pops, Dream Soft
   glides, Ink Press barely moves. One line per theme; components
   inherit it through the var() they already read.
   ============================================================ */
.theme-aurora-noir { --ss-ease:cubic-bezier(.2,.8,.2,1);    /* @kind other */ }  /* standard smooth */
.theme-terra-warm  { --ss-ease:cubic-bezier(.33,.9,.3,1);   /* @kind other */ }  /* organic settle */
.theme-volt-pop    { --ss-ease:cubic-bezier(.34,1.56,.64,1);/* @kind other */ }  /* spring pop */
.theme-cosmic-luxe { --ss-ease:cubic-bezier(.22,1,.36,1);   /* @kind other */ }  /* luxe glide */
.theme-synthwave   { --ss-ease:cubic-bezier(.34,1.4,.5,1);  /* @kind other */ }  /* neon spring */
.theme-dream-soft  { --ss-ease:cubic-bezier(.4,0,.2,1);     /* @kind other */ }  /* gentle float */
.theme-saas-light  { --ss-ease:cubic-bezier(.2,.8,.2,1);    /* @kind other */ }  /* crisp, productive */
.theme-ink-press   { --ss-ease:cubic-bezier(.4,0,.6,1);     /* @kind other */ }  /* restrained, editorial */
.theme-evergreen   { --ss-ease:cubic-bezier(.25,.9,.3,1);   /* @kind other */ }  /* calm organic */
.theme-coast       { --ss-ease:cubic-bezier(.34,1.3,.5,1);  /* @kind other */ }  /* bouncy, sunny */

/* ============================================================
   REDUCED MOTION — honored at the TOKEN layer. Zeroing the duration
   vars here means every component that reads --ss-dur / --ss-dur-*
   stops animating without each one re-implementing the media query.
   Easing collapses to linear; stagger to zero.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root, [class*="theme-"] {
    --ss-dur-instant: .01ms;   /* @kind other */
    --ss-dur-fast: .01ms;      /* @kind other */
    --ss-dur: .01ms;           /* @kind other */
    --ss-dur-slow: .01ms;      /* @kind other */
    --ss-dur-slower: .01ms;    /* @kind other */
    --ss-stagger: 0ms;         /* @kind other */
    --ss-ease: linear;         /* @kind other */
    --ss-ease-in: linear;      /* @kind other */
    --ss-ease-out: linear;     /* @kind other */
    --ss-ease-spring: linear;  /* @kind other */
    --ss-ease-emphasized: linear; /* @kind other */
  }
}


/* ===== tokens/state.css ===== */
/* ============================================================
   SonSunny OS — Focus & state tokens
   Interaction states as named tokens instead of per-component
   magic numbers: the focus ring, its glow variant, hover/selected
   tints, the press scale, and the disabled dimming. Every control
   reads these, so the whole system's interaction feel is tuned in
   one place (and re-skins per theme via --ss-primary).

   SCOPING (fix 2026-07-02, same as material.css): the focus glow + hover/
   selected tints are color-mix()'d FROM --ss-primary/--ss-surface-alt, so they
   must recompute wherever the active theme is set. Emitted only at :root they
   bake in the default (aurora-noir) role colors and a .theme-* class on a
   DESCENDANT inherits the stale tint — parts keep aurora's hover/selection color
   on every theme. Emitting on any themed element too re-resolves them per theme.
   ============================================================ */

:root, [class^="theme-"], [class*=" theme-"] {
  /* Focus — the keyboard-visible ring. Two forms: a crisp outline
     (default) and a soft glow for fields that already have a border. */
  --ss-focus-width:   2px;                                                   /* @kind spacing */
  --ss-focus-offset:  2px;                                                   /* @kind spacing */
  --ss-focus-ring:    var(--ss-focus-width) solid var(--ss-primary);         /* @kind other */
  --ss-focus-glow:    0 0 0 3px color-mix(in srgb, var(--ss-primary) 40%, transparent); /* @kind other */
  --ss-focus-glow-soft: 0 0 0 3px color-mix(in srgb, var(--ss-primary) 22%, transparent); /* @kind other */

  /* Surface state tints — hover/selected backgrounds for rows & items. */
  --ss-state-hover:    color-mix(in srgb, var(--ss-surface-alt) 55%, transparent); /* @kind color */
  --ss-state-selected: color-mix(in srgb, var(--ss-primary) 12%, transparent);     /* @kind color */
  --ss-state-selected-hover: color-mix(in srgb, var(--ss-primary) 18%, transparent); /* @kind color */

  /* Press feedback + disabled dimming — shared across controls. */
  --ss-press-scale:      0.97;  /* @kind other */
  --ss-press-lift:       -1px;  /* @kind spacing */
  --ss-disabled-opacity: 0.45;  /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   SonSunny OS — Base layer & typographic helpers
   Optional utility classes that bind the type roles to elements.
   Components don't depend on these; they're for cards, kits, and
   quick prose. Apply a theme by adding .theme-<slug> to a wrapper.
   ============================================================ */

.ss-surface {
  background: var(--ss-bg);
  color: var(--ss-on-surface);
  font-family: var(--ss-font-body);
}

/* — type roles — */
.ss-display {
  font-family: var(--ss-font-display);
  font-size: var(--ss-display-size);
  font-weight: var(--ss-display-weight);
  line-height: var(--ss-display-lh);
  letter-spacing: var(--ss-display-ls);
  font-style: var(--ss-display-style);
  color: var(--ss-on-surface);
  margin: 0;
}
.ss-h-lg {
  font-family: var(--ss-font-display);
  font-size: var(--ss-h-lg-size);
  font-weight: var(--ss-h-lg-weight);
  line-height: var(--ss-h-lg-lh);
  letter-spacing: var(--ss-display-ls);
  font-style: var(--ss-display-style);
  color: var(--ss-on-surface);
  margin: 0;
}
.ss-h-md {
  font-family: var(--ss-font-display);
  font-size: var(--ss-h-md-size);
  font-weight: var(--ss-h-md-weight);
  line-height: var(--ss-h-md-lh);
  color: var(--ss-on-surface);
  margin: 0;
}
.ss-body-lg {
  font-family: var(--ss-font-body);
  font-size: var(--ss-body-lg-size);
  line-height: var(--ss-body-lh);
  color: var(--ss-on-surface-muted);
  margin: 0;
}
.ss-body {
  font-family: var(--ss-font-body);
  font-size: var(--ss-body-md-size);
  line-height: var(--ss-body-lh);
  color: var(--ss-on-surface-muted);
  margin: 0;
}
.ss-eyebrow {
  font-family: var(--ss-font-body);
  font-size: var(--ss-label-size);
  font-weight: var(--ss-label-weight);
  line-height: var(--ss-label-lh);
  letter-spacing: var(--ss-label-ls);
  text-transform: uppercase;
  color: var(--ss-accent-text, var(--ss-primary));
  margin: 0;
}
.ss-mono {
  font-family: var(--ss-font-mono);
  font-size: 13px;
  line-height: 1.5;
}


/* ===== tokens/rtl.css ===== */
/* ============================================================
   SonSunny OS — RTL / bidirectional support
   The system is built on CSS logical properties (margin-inline,
   inset-inline, border-inline, text-align:start/end), so setting
   dir="rtl" on <html> or any wrapper mirrors layout automatically
   — no duplicate stylesheets. This file carries the few things
   logical properties DON'T handle: flipping directional icons, and
   a safety net for direction-sensitive glyphs.

   Mirror policy (harvested):
     FLIP    directional icons — back/forward, chevrons, breadcrumb
             separators, "next/prev", indent, send arrows.
     DON'T   logos, checkmarks, clock / circular-progress, media
             playback (play/pause/rewind), and anything containing
             numbers or letters.

   Usage: add class="ss-dir-icon" to a directional icon (or
   [data-dir-flip]) and it mirrors only when the inline direction is
   RTL. Universal icons get nothing and stay put.
   ============================================================ */

[dir="rtl"] .ss-dir-icon,
[dir="rtl"] [data-dir-flip] {
  transform: scaleX(-1);
}

/* The component chevrons that ARE directional (breadcrumb trail,
   pagination prev/next, menu/submenu carets) opt in by class. */
[dir="rtl"] .ssbc__sep svg,
[dir="rtl"] .sspg__arw svg {
  transform: scaleX(-1);
}

/* Keep numerals and code LTR even inside an RTL paragraph. */
[dir="rtl"] .ss-ltr-nums,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] .ss-mono {
  direction: ltr;
  unicode-bidi: embed;
}


/* ===== tokens/print.css ===== */
/* ============================================================
   SonSunny OS — Print / export styles
   Paper is a surface like any other. On @media print we re-point the
   SAME semantic tokens to an ink-on-white scale (so every themed
   subtree, light or dark, prints legibly), flatten elevation + FX,
   control page breaks, and hide interactive chrome.

   Hooks you can use in any layout:
     [data-print="hide"] / .no-print   — drop from the printout
     .print-only                       — hidden on screen, shown on paper
     [data-print-break]                — force a page break before
   ============================================================ */

@media print {
  /* Re-skin to ink-on-paper — overrides :root AND any .theme-* wrapper. */
  :root, [class*="theme-"] {
    --ss-bg:               #ffffff; /* @kind color */
    --ss-surface:          #ffffff; /* @kind color */
    --ss-surface-alt:      #f3f4f6; /* @kind color */
    --ss-on-surface:       #111827; /* @kind color */
    --ss-on-surface-muted: #4b5563; /* @kind color */
    --ss-border:           #d1d5db; /* @kind color */
    --ss-shadow:           none;    /* @kind other */
    --ss-shadow-sm:        none;    /* @kind other */
  }

  html, body {
    background: #ffffff !important;
    color: #111827 !important;
  }

  /* Keep deliberate fills/charts true (viz palette, badges, primary). */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
  }

  /* Kill ambience + interactive chrome. */
  #fx-canvas, .fx-overlays, canvas[id*="fx"],
  .sscp__back, .ss-tooltip,
  [data-print="hide"], .no-print {
    display: none !important;
  }

  /* Screen-hidden, paper-only content (e.g. a print header/footer). */
  .print-only { display: revert !important; }

  /* Page-break discipline — don't slice cards, rows, figures, media. */
  .ss-card, .ss-modal, .ssdt, table, figure, img, svg,
  .ss-stat, tr, blockquote, pre, li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  [data-print-break] { break-before: page; page-break-before: always; }

  /* Tables read better with full hairline grids on paper. */
  table { border-collapse: collapse; }
  thead { display: table-header-group; } /* repeat header across pages */

  a[href] { color: inherit; text-decoration: underline; }

  @page { margin: 16mm; }
}

/* The .print-only helper must be hidden on screen. */
.print-only { display: none; }


/* ==== SELF-HOSTED FONTS (SHIP-QUEUE v24-fonts row, wired 2026-08-08) ====
   Source: design-refs/tokens/fonts-local.css (T14 layer), urls -> /fonts/ (dist/fonts woff2 set).
   Flattened per the @import-shell law - no imports. LAW 17: no googleapis. */
/* fonts-local.css — self-hosted @font-face layer (T14 wiring, 2026-07-19; supersedes the T10 scaffold)
   LAW 17: zero external deps. STATUS: still waiting on woff2 binaries (licensing — operator supplies;
   exact download+subset commands in assets/fonts/README.md).
   CONTRACT: family names match the Google import verbatim → token font stacks need ZERO changes.
   Every family ships TWO files per weight: latin + vietnamese (diacritics are the product — the VN
   subset is REQUIRED, not optional). Budget: 16 weights × 2 subsets ≈ 370KB total (cap 400KB).
   ACTIVATE (after binaries land): in tokens/fonts.css swap the Google @import for
     the fonts-local import (no literal here: a recursive inliner would loop — 2026-07-19)
   then run guidelines/smoke-ci.card.html — zero external requests + VN glyph probe = pass. */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/anton-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/anton-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/archivo-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/archivo-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/archivo-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/archivo-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/archivo-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/archivo-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
/* THE DM-SERIF VN CALL (T14, decided 2026-07-19): DM Serif Display ships NO vietnamese subset.
   Resolution: keep the family NAME (tokens unchanged) and build the -vietnamese.woff2 file from
   Playfair Display 400 (closest VN-complete didone; same high-contrast display voice). The
   unicode-range split below makes the swap invisible: latin glyphs stay true DM Serif, VN
   diacritics render Playfair. Subset command in assets/fonts/README.md. */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/dm-serif-display-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/dm-serif-display-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/fraunces-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/fraunces-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/fraunces-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/fraunces-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/jetbrains-mono-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/jetbrains-mono-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/space-grotesk-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/space-grotesk-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/space-grotesk-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/space-grotesk-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/work-sans-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/work-sans-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/work-sans-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/work-sans-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
/* Fraunces italic 500 (display accents) — optional, only if budget allows */
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/fraunces-500-italic-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/fraunces-500-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

/* ==== T26 HOTFIX (2026-08-08, Cowork): hero copy over the GL canvas was theme-ink (near-black
   on light themes) at scroll-rest. The canvas is DARK at rest in every theme -> fixed on-dark
   ramp + soft scrim. T26 stays OPEN for the design session's proper treatment; remove this
   block when it lands. */
#heroCopy h1{color:#f2f5fc !important;text-shadow:0 2px 18px rgba(5,8,15,.85),0 6px 50px rgba(5,8,15,.6) !important}
#heroCopy > p{color:rgba(235,240,250,.85) !important}
#heroCopy::before{content:"";position:absolute;inset:-12% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 44%, rgba(5,8,15,.55), transparent 72%);border-radius:32px}