/* tokens/fonts.css */
/* Cync typefaces
   Primary UI/display: Geist  — modern, restrained grotesque (Stripe/Cloudflare energy)
   Data/numerals:      Geist Mono — tabular figures for metrics, IDs, timestamps
   Vendored locally in assets/fonts (woff2, latin subset, from Fontsource). */

/* ---- Geist (sans) ---- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-500.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/geist-600.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/geist-700.woff2") format("woff2");
}

/* ---- Geist Mono ---- */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-mono-500.woff2") format("woff2");
}

/* tokens/colors.css */
/* ============================================================
   Cync — Color tokens
   Calm cool-slate neutrals + one confident clinical-blue accent.
   Base ramps first, then semantic aliases. Use the aliases in UI.
   ============================================================ */

:root {
  /* ---------- Brand / Primary (royal blue, hue ~211 — matches the stage-tag hue set) ---------- */
  --blue-50:  #F0F7FF;
  --blue-100: #DEEEFF;
  --blue-200: #BBDDFF;
  --blue-300: #8AC5FF;
  --blue-400: #2E8CF8;
  --blue-500: #0A74F0;
  --blue-600: #005CDE;   /* primary action — rich royal-leaning blue, locked Jul 2026 */
  --blue-700: #0047C2;
  --blue-800: #003BA1;
  --blue-900: #063383;

  /* ---------- Neutrals (cool slate) ---------- */
  --slate-0:   #FFFFFF;
  --slate-25:  #FCFCFD;
  --slate-50:  #F8FAFC;
  --slate-100: #F1F4F8;
  --slate-200: #E3E8EF;
  --slate-300: #CDD5DF;
  --slate-400: #9AA4B2;
  --slate-500: #697586;
  --slate-600: #4B5565;
  --slate-700: #364152;
  --slate-800: #202939;
  --slate-900: #121926;

  /* ---------- Semantic hues ---------- */
  /* success — completed / loop-closed / report returned (green family) */
  --green-50:  #EAFBEF;
  --green-100: #D2F6DD;
  --green-200: #A5EDBD;
  --green-500: #22B94A;
  --green-600: #149A3C;
  --green-700: #13772C; /* aligned to pill ink, Aug 2026 */

  /* warning — stalling / overdue-soon / needs attention (orange family) */
  --amber-50:  #FFF7E8;
  --amber-100: #FFEDCC;
  --amber-200: #FFDD99;
  --amber-500: #EE9200;
  --amber-600: #D47B00;
  --amber-700: #9C5500; /* aligned to pill ink, Aug 2026 */

  /* danger — leakage / never-closed / overdue (red family) */
  --red-50:  #FFF0EF;
  --red-100: #FFDFDD;
  --red-200: #FFC6C2;
  --red-500: #F52F24;
  --red-600: #DE1D12;
  --red-700: #C02016; /* aligned to pill ink, Aug 2026 */

  /* violet — reserved for the "self-reported / unverified" distinction */
  --violet-50:  #F5F3FF;
  --violet-100: #ECE9FE;
  --violet-200: #DDD6FE;
  --violet-500: #875BF7;
  --violet-600: #7839EE;
  --violet-700: #6927DA;

  /* ============================================================
     Semantic aliases — reference THESE in product UI
     ============================================================ */

  /* surfaces — deliberately NOT pure white. Cards sit a step above a
     tinted page so hierarchy comes from surface, not from contrast; a
     full-bleed #FFFFFF field at typical display brightness is the main
     driver of eye strain in dense UI. */
  --surface-page:      #EFF2F6;
  --surface-card:      #FBFCFD;
  --surface-sunken:    #E8ECF2;
  --surface-raised:    #FDFDFE;
  --surface-hover:     #F3F5F8;
  --surface-active:    #E8ECF2;
  --surface-inverse:   var(--slate-900);
  --surface-brand-soft: var(--blue-50);

  /* text — reviewed against three softer/warmer alternatives and kept as is.
     Peak contrast is capped around 14.2:1 against --surface-card.
     Well past the AAA threshold of 7:1; going higher (slate-900 on white
     is ~17.6:1) causes halation, where the surface bleeds into the
     letterforms and the eye keeps re-focusing. */
  --text-strong:    var(--slate-800);
  --text-body:      #3B4453;
  --text-muted:     #626D7D;
  --text-subtle:    #8A94A2;
  --text-on-brand:  var(--slate-0);
  --text-on-inverse:var(--slate-0);
  --text-brand:     var(--blue-600);
  --text-link:      var(--blue-600);

  /* borders */
  --border-subtle:  #DCE2EA;
  --border-default: #C4CCD7;
  --border-strong:  var(--slate-400);
  --border-brand:   var(--blue-600);
  --border-focus:   var(--blue-500);

  /* brand actions */
  --brand:          var(--blue-600);
  --brand-hover:    var(--blue-700);
  --brand-active:   var(--blue-800);
  --brand-ring:     color-mix(in srgb, var(--blue-500) 28%, transparent);

  /* accent-derived surfaces — computed from --brand so they adapt to a
     personalized accent AND to dark mode without per-accent overrides */
  --accent-soft:        color-mix(in srgb, var(--brand) 9%,  var(--surface-card));
  --accent-soft-strong: color-mix(in srgb, var(--brand) 16%, var(--surface-card));
  --accent-soft-border: color-mix(in srgb, var(--brand) 24%, var(--surface-card));
  --accent-spark:       color-mix(in srgb, var(--brand) 32%, var(--surface-card));
  --accent-text:        var(--text-brand);

  /* "magic" AI gradient — blends the themeable accent with violet so it
     adapts to a personalized accent and to dark mode */
  --magic-grad:  linear-gradient(120deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 45%, var(--violet-500)) 58%, var(--violet-500) 100%);
  --magic-glow:  color-mix(in srgb, var(--violet-500) 50%, var(--brand));

  /* status — fg / bg / border triplets. Locked Aug 2026: bg = the matching stage-pill
     tint mixed to a 40% wash, border = the base hue at 38%, and alert TEXT sets the
     whole message in the status fg ink. */
  --status-success-fg:     var(--green-700);
  --status-success-bg:     color-mix(in srgb, #D2EDD7 40%, var(--surface-card));
  --status-success-border: color-mix(in srgb, #34C759 38%, var(--surface-card));
  --status-success-solid:  #22B94A;

  --status-warning-fg:     var(--amber-700);
  --status-warning-bg:     color-mix(in srgb, #F7E4C6 40%, var(--surface-card));
  --status-warning-border: color-mix(in srgb, #FF9F0A 38%, var(--surface-card));
  --status-warning-solid:  #EE9200;

  --status-danger-fg:      var(--red-700);
  --status-danger-bg:      color-mix(in srgb, #F7D8D6 40%, var(--surface-card));
  --status-danger-border:  color-mix(in srgb, #FF453A 38%, var(--surface-card));
  --status-danger-solid:   #D4160B; /* deepened from #F52F24 — white ink on the original was 3.95:1 */

  --status-info-fg:        #005FCA; /* pill ink — blue ramp itself is locked brand territory */
  --status-info-bg:        color-mix(in srgb, #D0E2F7 40%, var(--surface-card));
  --status-info-border:    color-mix(in srgb, #0A84FF 38%, var(--surface-card));
  --status-info-solid:     #035FD9;

  --status-neutral-fg:     #545D67;
  --status-neutral-bg:     color-mix(in srgb, #DDE1E7 40%, var(--surface-card));
  --status-neutral-border: color-mix(in srgb, #9AA7B8 55%, var(--surface-card));

  /* self-reported / unverified signal (dashed-violet convention) */
  --selfreport-fg:     var(--violet-700);
  --selfreport-bg:     var(--violet-50);
  --selfreport-border: var(--violet-200);

  /* referral stage accents — hue tracks attention, not pipeline position (Aug 2026) */
  --stage-1: #9AA7B8;  /* received / sent — nothing to do */
  --stage-2: #0A84FF;  /* contacted; outbound completed — in progress, ours */
  --stage-3: #AF52DE;  /* qualified; outbound received — accepted, ready to book */
  --stage-4: #34C759;  /* booked / scheduled — the active win */
  --stage-5: #9AA7B8;  /* terminal: completed / report-returned — done, recedes */

  /* data-viz categorical — matches the stage-tag hue set */
  --viz-1: #035FD9;
  --viz-2: #22B94A;
  --viz-3: #EE9200;
  --viz-4: #A03BD6;
  --viz-5: var(--slate-400);
  --viz-track: var(--slate-100);
}

/* tokens/typography.css */
/* ============================================================
   Cync — Typography tokens
   Geist for UI/display, Geist Mono for data (metrics, IDs, time).
   Type scale is compact at the dense end (worklist) and roomy at
   the display end (dashboard headlines).
   ============================================================ */

:root {
  /* families */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* font sizes — rem based on 16px root */
  --text-3xs: 0.625rem;  /* 10px — smallest legal size: stamps, kbd hints, sr tags */
  --text-2xs: 0.6875rem; /* 11px — table micro-labels, badges */
  --text-xs:  0.75rem;   /* 12px — meta, captions */
  --text-sm:  0.8125rem; /* 13px — dense table body */
  --text-md:  0.875rem;  /* 14px — default body / controls */
  --text-base:0.9375rem; /* 15px — comfortable body */
  --text-lg:  1.0625rem; /* 17px — section subheads */
  --text-xl:  1.25rem;   /* 20px — card titles */
  --text-2xl: 1.5rem;    /* 24px — page titles */
  --text-3xl: 1.875rem;  /* 30px — dashboard headings */
  --text-4xl: 2.375rem;  /* 38px — hero metric */
  --text-5xl: 3rem;      /* 48px — big proof number */

  /* line heights */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* letter spacing */
  --tracking-tighter: -0.02em;  /* large display numerals */
  --tracking-tight:   -0.011em; /* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.06em;   /* uppercase eyebrows / table headers */

  /* tabular numerals — apply on any numeric column / metric */
  --num-tabular: "tnum" 1, "lnum" 1, "cv01" 1; /* @kind other */

  /* semantic role aliases */
  --type-display-size:   var(--text-4xl);
  --type-display-weight: var(--weight-semibold);
  --type-display-tracking: var(--tracking-tighter);

  --type-h1-size:   var(--text-2xl);
  --type-h1-weight: var(--weight-semibold);
  --type-h2-size:   var(--text-xl);
  --type-h2-weight: var(--weight-semibold);
  --type-h3-size:   var(--text-lg);
  --type-h3-weight: var(--weight-semibold);

  --type-body-size:   var(--text-md);
  --type-body-weight: var(--weight-regular);

  --type-label-size:   var(--text-md);
  --type-label-weight: var(--weight-medium);

  --type-eyebrow-size:     var(--text-2xs);
  --type-eyebrow-weight:   var(--weight-semibold);
  --type-eyebrow-tracking: var(--tracking-caps);
}

/* tokens/spacing.css */
/* ============================================================
   Cync — Spacing, radius, elevation, motion, layout
   4px base grid. Subtle borders over heavy shadows.
   ============================================================ */

:root {
  /* ---------- spacing (4px grid) ---------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-14: 80px;
  --space-16: 96px;

  /* ---------- radius ---------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;   /* default control / card */
  --radius-lg:  12px;  /* large cards, dialogs */
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ---------- elevation — restrained, cool-tinted shadows ---------- */
  --shadow-none: none;
  /* hairline + 1px lift — default resting card */
  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.07), 0 1px 3px 0 rgba(16, 24, 40, 0.11);
  --shadow-md: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.10);
  --shadow-xl: 0 8px 8px -4px rgba(16, 24, 40, 0.04), 0 20px 24px -4px rgba(16, 24, 40, 0.10);
  /* slide-over / popovers */
  --shadow-overlay: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  /* inner hairline used on inputs for crisp 1px edge on retina */
  --ring-inset: inset 0 0 0 1px var(--border-subtle);

  /* focus ring */
  --focus-ring: 0 0 0 3px var(--brand-ring);
  --focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--red-500) 28%, transparent);

  /* ---------- motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);        /* @kind other */
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-normal:  220ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */

  /* ---------- layout ---------- */
  --sidebar-w:        248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:         56px;
  --slideover-w:      420px;
  --content-max:      1320px;
  --row-h-dense:      44px;   /* worklist row */
  --row-h-comfortable:56px;
  --control-h-sm:     30px;
  --control-h-md:     36px;
  --control-h-lg:     42px;
}

/* tokens/themes.css */
/* ============================================================
   Cync — Theme variants
   • [data-theme="dark"]  — dark surface/text/border/status remap
   • [data-theme="warm"]  — warm-neutral light (same luminance as default)
   • [data-accent="…"]    — personalized accent (overrides the blue
                            ramp, so --brand and every accent-derived
                            token recompute automatically)
   Set these attributes on <html>. They compose: a dark teal build is
   <html data-theme="dark" data-accent="teal">.
   ============================================================ */

/* ---------------------------------------------------------------
   DARK THEME
   --------------------------------------------------------------- */
[data-theme="dark"] {
  /* surfaces */
  --surface-page:      #0D131C;
  --surface-card:      #161E29;
  --surface-sunken:    #10171F;
  --surface-raised:    #1B2430;
  --surface-hover:     #1D2733;
  --surface-active:    #243040;
  --surface-inverse:   var(--slate-100);
  --surface-brand-soft: var(--accent-soft);

  /* text */
  --text-strong:    #F4F7FB;
  --text-body:      #C4CDD9;
  --text-muted:     #8B96A5;
  --text-subtle:    #66717F;
  --text-on-brand:  #FFFFFF;
  --text-on-inverse:#121926;
  --text-brand:     color-mix(in srgb, var(--brand) 62%, white);
  --text-link:      color-mix(in srgb, var(--brand) 62%, white);

  /* borders */
  --border-subtle:  #232E3C;
  --border-default: #2E3A49;
  --border-strong:  #3E4A5A;
  --border-focus:   var(--blue-400);

  /* accent text on dark needs lifting for legibility */
  --accent-text:    color-mix(in srgb, var(--brand) 64%, white);

  /* status — translucent dark tints, lifted foregrounds */
  --status-success-fg:     color-mix(in srgb, var(--green-500) 52%, white);
  --status-success-bg:     color-mix(in srgb, var(--green-500) 15%, var(--surface-card));
  --status-success-border: color-mix(in srgb, var(--green-500) 30%, var(--surface-card));

  --status-warning-fg:     color-mix(in srgb, var(--amber-500) 56%, white);
  --status-warning-bg:     color-mix(in srgb, var(--amber-500) 15%, var(--surface-card));
  --status-warning-border: color-mix(in srgb, var(--amber-500) 30%, var(--surface-card));

  --status-danger-fg:      color-mix(in srgb, var(--red-500) 54%, white);
  --status-danger-bg:      color-mix(in srgb, var(--red-500) 15%, var(--surface-card));
  --status-danger-border:  color-mix(in srgb, var(--red-500) 30%, var(--surface-card));

  --status-info-fg:        color-mix(in srgb, var(--brand) 60%, white);
  --status-info-bg:        var(--accent-soft);
  --status-info-border:    var(--accent-soft-border);

  --status-neutral-fg:     var(--text-muted);
  --status-neutral-bg:     var(--surface-hover);
  --status-neutral-border: var(--border-default);

  /* self-reported (violet) */
  --selfreport-fg:     color-mix(in srgb, var(--violet-500) 58%, white);
  --selfreport-bg:     color-mix(in srgb, var(--violet-500) 16%, var(--surface-card));
  --selfreport-border: color-mix(in srgb, var(--violet-500) 36%, var(--surface-card));

  /* data-viz */
  --viz-track: var(--surface-hover);

  /* elevation — deeper, darker shadows on dark surfaces */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.40);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.40), 0 1px 3px 0 rgba(0,0,0,0.50);
  --shadow-md: 0 2px 4px -2px rgba(0,0,0,0.45), 0 4px 8px -2px rgba(0,0,0,0.55);
  --shadow-lg: 0 4px 6px -2px rgba(0,0,0,0.40), 0 12px 16px -4px rgba(0,0,0,0.55);
  --shadow-xl: 0 8px 8px -4px rgba(0,0,0,0.40), 0 20px 24px -4px rgba(0,0,0,0.55);
  --shadow-overlay: 0 12px 16px -4px rgba(0,0,0,0.50), 0 24px 48px -12px rgba(0,0,0,0.66);

  color-scheme: dark;
}

/* ---------------------------------------------------------------
   WARM LIGHT
   The default light theme (colors.css) is a cool slate neutral. This
   variant keeps its exact luminance and contrast profile but pulls the
   blue bias out of the ramp — cool neutrals read harsher at high
   brightness. Same strain profile, softer feel.
   --------------------------------------------------------------- */

[data-theme="warm"] {
  --surface-page:      #F1F1EF;
  --surface-card:      #FCFCFB;
  --surface-sunken:    #EAEAE7;
  --surface-raised:    #FDFDFC;
  --surface-hover:     #F5F5F3;
  --surface-active:    #EAEAE7;

  --text-strong:       #26262B;
  --text-body:         #44454C;
  --text-muted:        #6B6C74;
  --text-subtle:       #94959C;

  --border-subtle:     #E2E1DD;
  --border-default:    #CBCAC5;
  --border-strong:     #A3A29C;

  --shadow-xs: 0 1px 2px 0 rgba(40, 34, 24, 0.06);
  --shadow-sm: 0 1px 2px 0 rgba(40, 34, 24, 0.07), 0 1px 3px 0 rgba(40, 34, 24, 0.11);
}

/* ---------------------------------------------------------------
   ACCENT RAMPS
   Each overrides the blue ramp; --brand and all accent-derived
   tokens (which reference --blue-*) recompute. Default (no attr or
   data-accent="blue") keeps the clinical-blue ramp from colors.css.
   --------------------------------------------------------------- */

/* Indigo */
[data-accent="indigo"] {
  --blue-50:  #F0F0FE; --blue-100: #E2E2FD; --blue-200: #C9C9FA; --blue-300: #A9A8F5;
  --blue-400: #7D71FA; --blue-500: #5B4CF5; --blue-600: #4633E8; --blue-700: #3726C7;
  --blue-800: #2C1FA3; --blue-900: #251B84;
}

/* Pink (deepened for button contrast) */
[data-accent="pink"] {
  --blue-50:  #FFF0F3; --blue-100: #FFDFE6; --blue-200: #FFC2CF; --blue-300: #FF94AC;
  --blue-400: #FB5C86; --blue-500: #F73267; --blue-600: #EB0F53; --blue-700: #C40A43;
  --blue-800: #9C0736; --blue-900: #7F052D;
}

/* Mint (deepened for button contrast) */
[data-accent="mint"] {
  --blue-50:  #E9FBF9; --blue-100: #CDF5F1; --blue-200: #9BEAE2; --blue-300: #62D9CE;
  --blue-400: #16D3C4; --blue-500: #00BFB0; --blue-600: #00A396; --blue-700: #00857A;
  --blue-800: #006B62; --blue-900: #005850;
}

/* Amber (deepened for button contrast) */
[data-accent="amber"] {
  --blue-50:  #FFF7E8; --blue-100: #FFEDCC; --blue-200: #FFDD99; --blue-300: #FFC661;
  --blue-400: #FFAC26; --blue-500: #FF9500; --blue-600: #F27A00; --blue-700: #C75F00;
  --blue-800: #9E4C00; --blue-900: #813E00;
}

/* ---------------------------------------------------------------
   BACKGROUND SCENES
   Each scene overrides the blue ramp (its matching accent) AND paints
   a soft background wash on the app surface. Scenes are mutually
   exclusive with data-accent (the app sets only one attribute).
   NOTE: washes are token-driven gradients — drop in real photographic
   backgrounds per scene at build time by overriding --scene-bg.
   --------------------------------------------------------------- */

/* Mountains — teal (uses photo background, see kit shell.css) */
[data-scene="mountains"] {
  --blue-50:#ECFAFC; --blue-100:#D0F2F7; --blue-200:#A6E5EE; --blue-300:#74D4E2; --blue-400:#40C2D4;
  --blue-500:#17A9BE; --blue-600:#0D93A8; --blue-700:#0A7789; --blue-800:#086070; --blue-900:#084F5C;
}
/* Sunrise — indigo (uses photo background, see kit shell.css) */
[data-scene="sunrise"] {
  --blue-50:#F0F0FE; --blue-100:#E2E2FD; --blue-200:#C9C9FA; --blue-300:#A9A8F5; --blue-400:#8280EE;
  --blue-500:#5E5CE6; --blue-600:#4B48C9; --blue-700:#3C39A8; --blue-800:#302E87; --blue-900:#28276E;
}
/* Ocean — cool blue (uses photo background, see kit shell.css) */
[data-scene="ocean"] {
  --blue-50:#F0F7FF; --blue-100:#DEEEFF; --blue-200:#BBDDFF; --blue-300:#8AC5FF; --blue-400:#2E8CF8;
  --blue-500:#0A74F0; --blue-600:#005CDE; --blue-700:#0047C2; --blue-800:#003BA1; --blue-900:#063383;
}
/* Autumn — burnt orange (uses photo background, see kit shell.css) */
[data-scene="autumn"] {
  --blue-50:#FFF3EC; --blue-100:#FFE4D1; --blue-200:#FFC9A3; --blue-300:#FFA76B; --blue-400:#FF8440;
  --blue-500:#F96A16; --blue-600:#E05206; --blue-700:#B54005; --blue-800:#8F3407; --blue-900:#752B08;
}
/* Snow — cool sky blue (uses photo background, see kit shell.css) */
[data-scene="snow"] {
  --blue-50:#F0FAFF; --blue-100:#DCF3FF; --blue-200:#B8E7FF; --blue-300:#85D5FF; --blue-400:#4FBEFA;
  --blue-500:#21A2ED; --blue-600:#0E86D4; --blue-700:#0C6BAD; --blue-800:#0D588D; --blue-900:#0E4971;
}

/* the wash — derived from the active scene's ramp, so it auto-matches */
[data-scene] {
  --scene-bg: linear-gradient(180deg, var(--blue-100) 0%, color-mix(in srgb, var(--blue-50) 55%, var(--surface-page)) 26%, var(--surface-page) 60%);
}
[data-theme="warm"][data-scene] {
  --scene-bg: linear-gradient(180deg, color-mix(in srgb, var(--blue-100) 70%, var(--surface-page)) 0%, color-mix(in srgb, var(--blue-50) 40%, var(--surface-page)) 26%, var(--surface-page) 60%);
}
[data-theme="dark"][data-scene] {
  --scene-bg: linear-gradient(180deg, color-mix(in srgb, var(--blue-800) 55%, var(--surface-page)) 0%, color-mix(in srgb, var(--blue-900) 35%, var(--surface-page)) 26%, var(--surface-page) 62%);
}

/* tokens/base.css */
/* ============================================================
   Cync — base element defaults & helpers
   Light reset + sensible document defaults so specimen cards and
   UI kits render consistently. App components remain self-contained.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  font-feature-settings: "cv01" 1, "ss01" 1;
}

/* numeric / data utility — tabular, mono, tight */
.lb-num {
  font-family: var(--font-mono);
  font-feature-settings: var(--num-tabular);
  letter-spacing: var(--tracking-tight);
}

/* uppercase eyebrow / table header utility */
.lb-eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* thin, calm scrollbars to match the restrained aesthetic */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--slate-300) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--slate-400); background-clip: padding-box; }