/* ─────────────────────────────────────────────────────────────
   Swivel Component Library — Design Tokens
   ───────────────────────────────────────────────────────────── */

/* Brand webfonts — declared here so any page loading tokens.css picks
   up the typefaces automatically (no second stylesheet to remember).
   Paths are relative to this file's location (design-system/), so
   they walk up to the project-root /fonts/ directory. */
@font-face {
  font-family: 'Avantt';
  src: url('../fonts/Avantt-SemiBold.woff2') format('woff2'),
       url('../fonts/Avantt-SemiBold.woff')  format('woff'),
       url('../fonts/Avantt-SemiBold.ttf')   format('truetype');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avantt';
  src: url('../fonts/Avantt-Bold.woff2') format('woff2'),
       url('../fonts/Avantt-Bold.woff')  format('woff'),
       url('../fonts/Avantt-Bold.ttf')   format('truetype');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
/* Antarctica Condensed — declared under "Antarctica" so it matches the
   --font-body token directly (no aliasing needed at the consumer). */
@font-face {
  font-family: 'Antarctica';
  src: url('../fonts/Antarctica-Condensed.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antarctica';
  src: url('../fonts/Antarctica-CondensedItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Antarctica';
  src: url('../fonts/Antarctica-CondensedMedium.otf') format('opentype');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antarctica';
  src: url('../fonts/Antarctica-CondMedIta.otf') format('opentype');
  font-weight: 500 600;
  font-style: italic;
  font-display: swap;
}

/* Base token set. Values here are the LIGHT theme; they apply when a subtree
   is explicitly marked [data-theme="light"]. With no attribute set at all the
   dark block below wins, so the system is DARK BY DEFAULT.
   Listing [data-theme="light"] here as well as :root is what lets a light
   subtree be nested inside a dark ancestor — without it, light values would
   only ever exist at the document root. */
:root,
[data-theme="light"] {
  /* Core palette */
  --switch-100: #A8F8FF;
  --switch-contrast: #0097A7;
  --graphite-base: #131514;
  --slate-base: #637D9C;
  --slate-bg: #DCE8F5;
  --white: #FFFFFF;
  /* Primary CTA fill in light mode — slate, matching the pre-existing .btn-primary. */
  --btn-primary-bg:       var(--slate-100);
  --btn-primary-bg-hover: var(--slate-110);
  --btn-primary-fg:       var(--white);
  --btn-outline-fg:       var(--slate-100);
  --sn-selected-bg:       var(--slate-bg);
  --sn-selected-fg:       var(--slate-110);
  --ts-active-fg:         var(--slate-base);
  --ts-track-on:          var(--graphite-30);

  /* Graphite scale */
  --graphite-10: #F0F1F0;
  --graphite-20: #D4D6D5;
  --graphite-30: #B8BAB9;
  --graphite-40: #9C9F9E;
  --graphite-50: #808382;
  --graphite-60: #646866;
  --graphite-70: #484C4B;
  --graphite-80: #2C3030;
  --graphite-90: #131514;

  /* Slate scale */
  --slate-10: #F0F3F7;
  --slate-20: #DCE4ED;
  --slate-30: #C8D5E3;
  --slate-40: #B4C6D9;
  --slate-50: #A0B7CF;
  --slate-60: #8CA8C5;
  --slate-70: #7899BB;
  --slate-80: #6F8BA7;
  --slate-90: #677F9F;
  --slate-100: #637D9C;
  --slate-110: #567088;
  --slate-120: #496374;
  --slate-130: #3C5660;
  --slate-140: #2F494C;
  --slate-150: #223C38;

  /* Semantic */
  --success-bg: #C8E6C9;
  --success: #2E7D32;
  --success-fg: #0A3D0C;
  --success-text: #256B29;     /* success-coloured text — 6.53:1 base, 5.26:1 row hover */

  /* --warning was #ED6C02 — 3.11:1 on --surface-base, 2.51:1 on the row-hover
     ground, both under the 3:1 non-text threshold, and 2.45:1 on --warning-bg
     (under 4.5:1 for the text/icon cases that use it there). Darkened to clear
     --surface-base, --graphite-10, --slate-bg, and --warning-bg all at once. */
  --warning-bg: #FFE0B2;
  --warning: #D96600;          /* icons, fills, borders only — 3.59:1 on base, 3.17:1 on row hover */
  --warning-text: #9A4800;     /* warning-coloured text — 5.0:1+ on base, hover, slate-bg, warning-bg */
  --warning-fg: #7A3300;

  --info-bg: #BBDEFB;
  --info: #1976D2;
  --info-fg: #0A2A6E;

  --error-bg: #FFCDD2;
  --error: #D32F2F;
  --error-fg: #5C0000;
  --error-text: #B71C1C;       /* error-coloured text — 6.57:1 base, 5.29:1 row hover */

  /* Extended core (parity with Figma) */
  --switch-bg: #D6FEFF;
  --graphite-contrast: #000000;
  --slate-contrast: #1A2D42;
  --white-contrast: #9E9E9E;
  --slate-bg-50: rgba(220, 232, 245, 0.5);

  /* Button hover fills that are not steps on any existing ramp — named
     directly so they don't drift as literals across .btn-tonal/.btn-accent/
     .btn-danger and their icon-button twins. */
  --btn-tonal-hover: #CDDCEC;
  --btn-accent-hover: #C2FBFF;
  --btn-danger-hover: #B71C1C;
  --btn-tonal-error-hover: #FFB3BA;

  /* Interactive text. Two grounds have to clear 4.5:1 at 14px/400, not one:
     --surface-base AND --slate-bg, the row-hover tint. The hover ground is the
     harder of the two and the one a table link is read on most of the time,
     since pointing anywhere in the row lights it while a:hover does not fire.
     --slate-100 is theme-fixed (#637D9C in both themes) and fails everywhere:
     4.25 card / 3.28 hover in light. These invert and clear both:
       light  --slate-120  6.32 card / 5.09 hover
       dark   --slate-contrast  9.13 / 7.52 */
  --link: var(--slate-120);
  --link-hover: var(--slate-130);        /* 7.80 / 6.28 */

  /* Spacing */
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-xxl: 20px;
  --space-3xl: 24px;
  --space-4xl: 32px;
  --space-5xl: 40px;
  --space-section: 64px;

  /* Control heights — shared by buttons, fields, tag-inputs, btn-groups */
  --control-h-sm: 24px;
  --control-h: 34px;
  --control-h-lg: 40px;

  /* Motion · durations */
  --motion-instant: 80ms;    /* @kind other */ /* tooltip show, state flips that should feel instantaneous */
  --motion-fast:    120ms;   /* @kind other */ /* hover, focus, small color/opacity shifts */
  --motion-base:    200ms;   /* @kind other */ /* the default, most UI transitions */
  --motion-slow:    240ms;   /* @kind other */ /* expand/collapse, drawer slide, sheet/modal */
  --motion-deliberate: 360ms; /* @kind other */ /* attention-getting changes, value count-ups, hero reveals */

  /* Motion · easing */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */ /* enter+exit, the default */
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);   /* @kind other */ /* large surface transitions */
  --ease-enter:    cubic-bezier(0, 0, 0, 1);       /* @kind other */ /* element appearing */
  --ease-exit:     cubic-bezier(0.3, 0, 1, 1);     /* @kind other */ /* element leaving */
  --ease-linear:   linear;                          /* @kind other */ /* progress bars, scrub */

  /* Elevation — Material 3 light / level 1 baseline */
  --elev-1: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elev-2: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --elev-3: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --elev-modal: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.30);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(168, 248, 255, 0.4);

  /* Radius */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Icon sizes (Material Symbols font-size) */
  --icon-2xs: 12px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 22px;
  --icon-2xl: 24px;
  --icon-3xl: 32px;

  /* Type */
  --font-display: "Avantt", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Antarctica", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Headline scale — Avantt (Figma Headline.*) */
  --fs-display:         72px;
  --fs-h1:              48px;
  --fs-h2:              36px;
  --fs-h3:              28px;
  --fs-h4:              22px;

  /* Body scale — Antarctica Condensed (Figma Body.*) */
  --fs-body-l:          18px;  /* lead body, alert/dialog titles */
  --fs-body:            14px;  /* default body */
  --fs-body-s:          12px;  /* supporting copy */
  --fs-body-label:      12px;  /* field labels, data keys */
  --fs-body-caption:    10px;  /* timestamps, version strings */

  /* UI scale — mixed Inter / Antarctica per Figma UI.* */
  --fs-ui-metric:       28px;   /* KPI readouts */
  --fs-ui-page-header:  21px;   /* page headers */
  --fs-ui-title:        18px;   /* alert/dialog titles */
  --fs-ui-default:      14px;   /* body UI text */
  --fs-ui-dense:        13px;   /* dense body text: menu items, dates, subtitles */
  --fs-ui-caps:         13px;   /* button labels, card titles, tabs — UPPERCASE */
  --fs-ui-nav:          13px;   /* nav items */
  --fs-ui-small:        12px;   /* tooltips, helper */
  --fs-ui-xs:           11px;   /* chips, badges, small buttons, mono IDs and stamps */
  --fs-ui-tag:          10px;   /* badges, status chips */
  --fs-ui-section:      10px;   /* ALL-CAPS section dividers */
  --fs-ui-code:         10px;   /* JetBrains Mono · ID chips, inline code, monospace UI strings */

  /* Chart axis aliases — alias existing UI-scale tokens so chart code
     reads what it means. Tick labels share UI/Small with in-chart
     value labels (one token, one density); axis titles share UI/Caps
     with the rest of the uppercase eyebrow family. */
  --fs-axis-tick:       var(--fs-ui-small);  /* 12px · Avantt SemiBold tick + category labels */
  --fs-axis-title:      var(--fs-ui-caps);   /* 13px · uppercase rotated value-axis title */

  /* Shared typography axes (Figma defaults) */
  --ls-headline:        0.04em;   /* Figma 4% on Headline.* + Body.* */
  --ls-ui-tracked:      0.04em;   /* Figma 4% on Caps/Tag/Nav/Section Label */
  --lh-tight:           0.95;     /* @kind font */ /* Figma 95% line-height */

  /* Surface helper (matches colors_and_type.css) */
  --graphite-bg: #6B7170;
  --surface-input: #FFFFFF;

  /* Surface semantics — preferred names going forward */
  --surface-base:   #FFFFFF;   /* card / panel / row / tooltip fill */
  --surface-canvas: #FCFCFC;   /* page background */
  --surface-muted:  #F0F1F0;   /* secondary fill · disabled / inset */
  --surface-stroke: #D4D6D5;   /* hairline border on all surfaces */

  /* ────────────────────────────────────────────────────────────
     Data viz palette · shared across Charts, Palette, Dashboards
     Anchored on slate and switch; lightness curves match across
     sequential ramps so a heatmap reads as one fabric.
     ──────────────────────────────────────────────────────────── */


  /* ────────────────────────────────────────────────────────────
     Material Design 3 bridge — date and time pickers.
     Policy (design-system/Date and Time.html §01): inherit the M3
     component specs end to end — structure, interaction, a11y,
     layout dimensions — and override colour only. These are the
     only colour decisions to read M3 docs against.
     ──────────────────────────────────────────────────────────── */
  --md-primary:               var(--switch-contrast);     /* selected fill */
  /* Ink on a selected cell, dial mark, or range endpoint. NOT --white: switch
     cyan is bright in BOTH themes (#0097A7 light, #00E5FF dark), so white ink
     drops the selected date to ~3.4:1 in light and ~1.4:1 in dark.
     --graphite-contrast is near-black under both themes — the same fix
     .btn-accent already uses for a switch-filled control. */
  --md-on-primary:            var(--graphite-contrast);   /* text on selected */
  --md-primary-container:     var(--switch-bg);           /* range fill, today bg */
  --md-on-primary-container:  var(--graphite-90);
  --md-surface:               var(--surface-base);
  --md-surface-container:     var(--surface-muted);
  --md-surface-container-hi:  var(--graphite-10);
  --md-outline:               var(--surface-stroke);
  --md-outline-variant:       var(--graphite-10);
  --md-on-surface:            var(--graphite-90);
  --md-on-surface-variant:    var(--graphite-bg);
  --md-state-hover:           rgba(99, 125, 156, 0.08);   /* slate @ 8% */
  --md-state-focus:           rgba(99, 125, 156, 0.12);

  /* Categorical · 6 cool hues */
  --viz-slate:    var(--slate-base);
  --viz-switch:   var(--switch-contrast);
  --viz-deep:     oklch(0.30 0.060 252);
  --viz-steel:    oklch(0.55 0.090 235);
  --viz-mist:     oklch(0.78 0.045 220);
  --viz-graphite: var(--graphite-70);

  /* Sequential · slate */
  --seq-slate-1: oklch(0.96 0.015 252);
  --seq-slate-2: oklch(0.88 0.030 252);
  --seq-slate-3: oklch(0.78 0.045 252);
  --seq-slate-4: oklch(0.68 0.060 252);
  --seq-slate-5: oklch(0.56 0.060 252);
  --seq-slate-6: oklch(0.44 0.060 252);
  --seq-slate-7: oklch(0.30 0.050 252);

  /* Sequential · switch */
  --seq-switch-1: oklch(0.96 0.020 200);
  --seq-switch-2: oklch(0.88 0.045 200);
  --seq-switch-3: oklch(0.78 0.070 200);
  --seq-switch-4: oklch(0.68 0.080 200);
  --seq-switch-5: oklch(0.58 0.085 200);
  --seq-switch-6: oklch(0.46 0.080 200);
  --seq-switch-7: oklch(0.32 0.070 200);

  /* Sequential · warm (use when slate would collide with brand chrome) */
  --seq-warm-1: oklch(0.96 0.020  60);
  --seq-warm-2: oklch(0.88 0.050  60);
  --seq-warm-3: oklch(0.80 0.080  60);
  --seq-warm-4: oklch(0.74 0.105  55);
  --seq-warm-5: oklch(0.66 0.130  45);
  --seq-warm-6: oklch(0.54 0.135  35);
  --seq-warm-7: oklch(0.40 0.120  30);

  /* Diverging · deep-slate ↔ switch-cyan, midpoint near page bg */
  --div-1: oklch(0.30 0.060 252);
  --div-2: oklch(0.42 0.075 250);
  --div-3: oklch(0.54 0.080 245);
  --div-4: oklch(0.68 0.060 240);
  --div-5: oklch(0.94 0.008 220);
  --div-6: oklch(0.78 0.060 215);
  --div-7: oklch(0.66 0.080 205);
  --div-8: oklch(0.54 0.090 198);
  --div-9: oklch(0.42 0.085 195);

  /* Many-series stack · 10-step slate → switch gradient */
  --stack-1:  oklch(0.38 0.075 252);
  --stack-2:  oklch(0.46 0.080 250);
  --stack-3:  oklch(0.54 0.080 245);
  --stack-4:  oklch(0.60 0.080 240);
  --stack-5:  oklch(0.64 0.080 232);
  --stack-6:  oklch(0.68 0.080 224);
  --stack-7:  oklch(0.72 0.082 216);
  --stack-8:  oklch(0.76 0.085 210);
  --stack-9:  oklch(0.82 0.085 204);
  --stack-10: oklch(0.88 0.085 200);
  --stack-other: var(--graphite-20);
}

/* ============================================================
   DARK MODE — Figma color.$extensions.mode.dark — DEFAULT THEME.
   Applies unless a subtree opts out with [data-theme="light"].
   [data-theme="dark"] is still honored for nesting a dark subtree
   inside a light one, and for the theme toggle.
   ============================================================ */
:root:not([data-theme="light"]),
[data-theme="dark"] {
  /* Switch */
  --switch-100:        #A8F8FF;   /* unchanged */
  --switch-bg:         #1F4A4E;
  --switch-contrast:   #00E5FF;
  /* Primary CTA fill in dark mode — see --link above for why switch replaces
     slate here, and --md-on-primary for why the ink stays dark. */
  --btn-primary-bg:      var(--switch-contrast);
  --btn-primary-bg-hover: var(--switch-100);
  --btn-primary-fg:      var(--graphite-contrast);
  /* Secondary/tertiary button text + border — same reasoning as CTA and link:
     switch reads brighter than slate against dark surfaces. */
  --btn-outline-fg:      var(--switch-contrast);
  /* Sidenav selected item — same reasoning as CTA/link. */
  --sn-selected-bg:      var(--switch-bg);
  --sn-selected-fg:      var(--switch-contrast);
  /* Theme switch active icon + track fill — same reasoning as CTA/link. */
  --ts-active-fg:        var(--switch-contrast);
  --ts-track-on:         var(--switch-contrast);

  /* Graphite — full scale inverts so text/borders stay legible */
  --graphite-base:     #F2F3F2;
  --graphite-bg:       #B8BAB9;
  --graphite-contrast: #131514;
  --graphite-10:       #2C3030;
  --graphite-20:       #3A3E3D;
  --graphite-30:       #4A4F4E;
  --graphite-40:       #646866;
  --graphite-50:       #808382;
  --graphite-60:       #9C9F9E;
  --graphite-70:       #B8BAB9;
  --graphite-80:       #D4D6D5;
  --graphite-90:       #F2F3F2;

  /* Slate */
  --slate-base:        #7B9BBF;
  --slate-bg:          #1E3048;
  --slate-contrast:    #A8C5E8;
  /* Primary CTA and links go switch-cyan in dark mode — the brand accent reads
     brighter against the dark surfaces, where slate recedes too close to the
     graphite scale. --switch-contrast dark (#00E5FF) is bright, so ink stays
     dark/graphite rather than white — the same fix as the M3 date-picker
     selection bridge below. */
  --link:              var(--switch-contrast);  /* 10.55 card / 8.69 row-hover */
  --link-hover:        var(--switch-100);        /* 13.56 / 11.16 */
  --slate-bg-50:       rgba(30, 48, 72, 0.5);

  /* White */
  --white:             #E0E0E0;
  --white-contrast:    #BDBDBD;

  /* Semantic */
  --success:           #43A047;
  --success-bg:        #1B3A1C;
  --success-fg:        #B9F6CA;
  --success-text:      #66BB6A;

  --warning:           #FF8F00;
  --warning-bg:        #3E2000;
  --warning-fg:        #FFD54F;
  --warning-text:      #FF8F00;

  --info:              #1E88E5;
  --info-bg:           #12294D;
  --info-fg:           #90CAF9;

  --error:             #E53935;
  --error-bg:          #3B0000;
  --error-fg:          #FF8A80;
  --error-text:        #FF6F61;

  --btn-tonal-hover:   #2A3F5C;
  --btn-accent-hover:  #C2FBFF;
  --btn-danger-hover:  #C62828;
  --btn-tonal-error-hover: #520A0A;

  /* Surface helpers shift to dark plates */
  --surface-input:     #1E2020;
  --surface-canvas:    #131514;
  --surface-base:      #1E2120;
  --surface-muted:     #1A1C1B;
  --surface-stroke:    #2C3030;

  /* M3 bridge · dark state overlays (switch accent instead of slate) */
  --md-state-hover:  rgba(168, 248, 255, 0.10);
  --md-state-focus:  rgba(168, 248, 255, 0.16);

  /* Data viz palette · dark-mode overrides (categorical lifted in L,
     sequential ramps reversed, diverging ends brightened) */
  --viz-deep:   oklch(0.48 0.070 250);
  --viz-steel:  oklch(0.66 0.100 232);
  --viz-mist:   oklch(0.86 0.045 218);

  --seq-slate-1: oklch(0.25 0.020 252);
  --seq-slate-2: oklch(0.34 0.040 252);
  --seq-slate-3: oklch(0.44 0.060 252);
  --seq-slate-4: oklch(0.54 0.075 252);
  --seq-slate-5: oklch(0.64 0.085 252);
  --seq-slate-6: oklch(0.76 0.090 252);
  --seq-slate-7: oklch(0.88 0.075 252);

  --seq-switch-1: oklch(0.25 0.030 200);
  --seq-switch-2: oklch(0.34 0.060 200);
  --seq-switch-3: oklch(0.44 0.085 200);
  --seq-switch-4: oklch(0.54 0.105 200);
  --seq-switch-5: oklch(0.64 0.115 200);
  --seq-switch-6: oklch(0.76 0.110 200);
  --seq-switch-7: oklch(0.88 0.090 200);

  --seq-warm-1: oklch(0.25 0.030  50);
  --seq-warm-2: oklch(0.34 0.065  45);
  --seq-warm-3: oklch(0.44 0.095  40);
  --seq-warm-4: oklch(0.54 0.120  38);
  --seq-warm-5: oklch(0.64 0.135  40);
  --seq-warm-6: oklch(0.76 0.135  55);
  --seq-warm-7: oklch(0.88 0.115  75);

  --div-1: oklch(0.84 0.080 252);
  --div-2: oklch(0.72 0.085 248);
  --div-3: oklch(0.58 0.080 244);
  --div-4: oklch(0.42 0.060 240);
  --div-5: oklch(0.30 0.012 220);
  --div-6: oklch(0.46 0.080 212);
  --div-7: oklch(0.62 0.095 204);
  --div-8: oklch(0.78 0.100 200);
  --div-9: oklch(0.90 0.095 198);

  --stack-1:  oklch(0.50 0.075 252);
  --stack-2:  oklch(0.56 0.080 248);
  --stack-3:  oklch(0.62 0.080 240);
  --stack-4:  oklch(0.66 0.080 232);
  --stack-5:  oklch(0.70 0.082 224);
  --stack-6:  oklch(0.74 0.082 216);
  --stack-7:  oklch(0.78 0.085 210);
  --stack-8:  oklch(0.82 0.085 206);
  --stack-9:  oklch(0.86 0.085 202);
  --stack-10: oklch(0.90 0.080 198);
  --stack-other: var(--graphite-70);
}

/* ============================================================
   UI TYPOGRAPHY
   Antarctica Condensed body + Avantt display.
   ============================================================ */
.t-ui-metric,
.t-ui-page-header,
.t-ui-title,
.t-ui-default,
.t-ui-semibold,
.t-ui-caps,
.t-ui-nav,
.t-ui-small,
.t-ui-tag,
.t-ui-section-label {
  font-family: var(--font-body);
  letter-spacing: 0;
  line-height: 1.5;
}
.t-ui-metric        { font-size: var(--fs-ui-metric);      font-weight: 700; line-height: 0.95; color: var(--switch-contrast); }
.t-ui-page-header   { font-family: var(--font-display); font-size: var(--fs-ui-page-header); font-weight: 600; line-height: 1.33; text-transform: uppercase; }
.t-ui-title         { font-family: var(--font-display); font-size: var(--fs-ui-title);       font-weight: 600; line-height: 0.95; }
.t-ui-default       { font-size: var(--fs-ui-default);     font-weight: 400; line-height: 1.71; }
.t-ui-semibold      { font-size: var(--fs-ui-default);     font-weight: 600; line-height: 1.71; }
.t-ui-caps          { font-size: var(--fs-ui-caps);        font-weight: 500; line-height: 1.85; letter-spacing: 0.04em; text-transform: uppercase; }
.t-ui-nav           { font-family: var(--font-display); font-size: var(--fs-ui-nav);         font-weight: 600; line-height: 0.95; letter-spacing: 0.04em; }
.t-ui-small         { font-family: var(--font-display); font-size: var(--fs-ui-small);       font-weight: 600; }
.t-ui-tag           { font-size: var(--fs-ui-tag);         font-weight: 400; line-height: 0.95; letter-spacing: 0.04em; }
.t-ui-section-label { font-size: var(--fs-ui-section);     font-weight: 600; line-height: 0.95; letter-spacing: 0.04em; text-transform: uppercase; color: var(--graphite-bg); }
.t-ui-code          { font-family: var(--font-mono);   font-size: var(--fs-ui-code);        font-weight: 500; line-height: 23px; font-feature-settings: "ss01", "cv11"; }

/* ============================================================
   HEADLINE TYPOGRAPHY — Avantt display
   ============================================================ */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
}
.t-display { font-size: var(--fs-display); font-weight: 700; }
.t-h1      { font-size: var(--fs-h1);      font-weight: 700; }
.t-h2      { font-size: var(--fs-h2);      font-weight: 700; }
.t-h3      { font-size: var(--fs-h3);      font-weight: 600; }
.t-h4      { font-size: var(--fs-h4);      font-weight: 600; }

/* ============================================================
   BODY TYPOGRAPHY — Antarctica Condensed
   ============================================================ */
.t-body-l, .t-body, .t-body-s, .t-body-label, .t-body-caption {
  font-family: var(--font-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
}
.t-body-l       { font-size: var(--fs-body-l);       font-weight: 500; }
.t-body         { font-size: var(--fs-body);         font-weight: 400; line-height: 1.43; }
.t-body-s       { font-size: var(--fs-body-s);       font-weight: 400; }
.t-body-label   { font-size: var(--fs-body-label);   font-weight: 500; }
.t-body-caption { font-size: var(--fs-body-caption); font-weight: 400; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Was var(--graphite-90), the primary text color, which is near-white in dark mode and
     left a light frame around every page that did not set its own html background. */
  background: var(--surface-canvas);
  color: var(--graphite-90);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Tiny tag/eyebrow used in nearly every card */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--slate-100);
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--slate-100);
  opacity: 0.6;
}

.card {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  padding: 28px 40px;
  box-shadow: 0 1px 0 rgba(19, 21, 20, 0.04), 0 4px 24px rgba(19, 21, 20, 0.04);
}

.card .card-body {
  margin-top: 24px;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "cv11";
}