/* GENERATED by build.mjs from source.json — do not edit by hand. v0.3.0 · 2026-07-06 */

/* Fonts — Ubuntu + JetBrains Mono from Google; Wonder Unit Sans self-hosted (woff2 in ./fonts). */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* Wonder Unit Sans (body) — paths are relative to this file, so consumers that copy
   tokens.css must copy ./fonts alongside it (e.g. the fwf-design references sync). */
@font-face {
  font-family: 'Wonder Unit Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('./fonts/WonderUnitSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Wonder Unit Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/WonderUnitSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Wonder Unit Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/WonderUnitSans-Semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Wonder Unit Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('./fonts/WonderUnitSans-Bold.woff2') format('woff2');
}

/* ---------- Brand primitives ----------
   Raw colour values. For theme-token resolution only.
   ⚠ Do NOT use these directly in components or layouts.
     Use the semantic tokens below (--ink, --surface, --accent-*, --status-*).
     Reaching for --fwf-orange instead of --accent-urgent bypasses theming and
     breaks the contract that lets a single data-theme switch recolour the UI.
     Exception — alpha tints: semantic roles are deliberately opaque, so a
     translucent wash comes from a primitive's `-rgb` channel companion:
     rgb(var(--fwf-yellow-rgb) / 0.1), or `bg-fwf-yellow/10` via tailwind.theme.js. */
:root {
  --fwf-navy: #081B33;
  --fwf-navy-rgb: 8 27 51;
  --fwf-yellow: #FEC601;
  --fwf-yellow-rgb: 254 198 1;
  --fwf-yellow50: #FFE380;
  --fwf-yellow50-rgb: 255 227 128;
  --fwf-orange: #FE5100;
  --fwf-orange-rgb: 254 81 0;
  --fwf-orange60: #FE9766;   /* 60% tint of orange — soft peach on navy */
  --fwf-orange60-rgb: 254 151 102;
  --fwf-sky: #77BDDB;
  --fwf-sky-rgb: 119 189 219;
  --fwf-sky60: #ADD7E9;
  --fwf-sky60-rgb: 173 215 233;
  --fwf-sky20: #E4F2F8;
  --fwf-sky20-rgb: 228 242 248;
  --fwf-green: #6CBE45;
  --fwf-green-rgb: 108 190 69;
  --fwf-muted-blue: #335561;
  --fwf-muted-blue-rgb: 51 85 97;
  --fwf-charcoal: #525252;
  --fwf-charcoal-rgb: 82 82 82;
  --fwf-near-black: #222222;
  --fwf-near-black-rgb: 34 34 34;
  --fwf-navy-mid: #0a2138;
  --fwf-navy-mid-rgb: 10 33 56;
  --fwf-navy-deep: #0c2a4a;
  --fwf-navy-deep-rgb: 12 42 74;
}

/* ---------- Shared tokens (theme-independent) ---------- */
:root {
  /* Type families */
  --font-sans: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Wonder Unit Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type roles — fluid clamp() bundles */
  --t-display-size: clamp(2.5rem, 1.59rem + 3.88vw, 4.5rem);
  --t-display-lh: 1.04;
  --t-display-weight: 700;
  --t-display-tracking: -0.015em;
  --t-h1-size: clamp(2rem, 1.55rem + 1.94vw, 3rem);
  --t-h1-lh: 1.1;
  --t-h1-weight: 700;
  --t-h1-tracking: -0.005em;
  --t-h2-size: clamp(1.5rem, 1.27rem + 0.97vw, 2rem);
  --t-h2-lh: 1.15;
  --t-h2-weight: 700;
  --t-h3-size: clamp(1.25rem, 1.14rem + 0.48vw, 1.5rem);
  --t-h3-lh: 1.3;
  --t-h3-weight: 400;
  --t-eyebrow-size: 0.6875rem;
  --t-eyebrow-lh: 1.4;
  --t-eyebrow-weight: 700;
  --t-eyebrow-tracking: 0.18em;
  --t-eyebrow-mono-size: 0.625rem;
  --t-eyebrow-mono-lh: 1.4;
  --t-eyebrow-mono-weight: 500;
  --t-eyebrow-mono-tracking: 0.12em;
  --t-body-size: 1rem;
  --t-body-lh: 1.55;
  --t-body-weight: 400;
  --t-body-sm-size: 0.875rem;
  --t-body-sm-lh: 1.5;
  --t-label-size: 0.8125rem;
  --t-label-lh: 1.3;
  --t-label-weight: 500;
  --t-data-size: 0.9375rem;
  --t-data-lh: 1.2;
  --t-data-weight: 500;

  /* Spacing (8pt) — rem */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --page-pad: clamp(1rem, 4vw, 4rem);

  /* Radius — rem */
  --r-none: 0;
  --r-xs: 0.125rem;
  --r-sm: 0.25rem;
  --r-md: 0.375rem;
  --r-lg: 1.25rem;
  --r-pill: 9999px;

  /* Elevation */
  --el-1: 0 1px 0 var(--line);
  --el-2: 0 12px 28px rgba(0,0,0,.08), 0 0 0 1px var(--line);

  /* Effects — builder-mode composite treatments (Part 7b) */
  --frame-screenshot-border: 1px solid var(--border-raised);
  --frame-screenshot-radius: var(--r-md);
  --frame-screenshot-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.18);
  --motif-terminal-border: 1px solid var(--border-raised);
  --motif-terminal-radius: var(--r-md);
  --motif-terminal-bar: var(--surface-raised-2);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Grid — rem */
  --grid-cols-desktop: 12;
  --grid-cols-tablet: 8;
  --grid-cols-mobile: 4;
  --grid-gutter-desktop: 1.5rem;
  --grid-gutter-tablet: 1.25rem;
  --grid-gutter-mobile: 1rem;
  --content-max: 73.75rem;

  /* Breakpoints — em. @media/@container can't read var(); author queries with the literal em values. These vars are for JS + docs. */
  --bp-sm: 37.5em;
  --bp-md: 48em;
  --bp-lg: 64em;
  --bp-xl: 80em;

  /* Misc — rem */
  --tap: 2.75rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 1.75rem;
}

/* ---------- Themes ----------
   Components must only reference tokens from this section — never the primitives above.
   Each token has a use-case comment. Read it before picking a token. */

/* Wireframe (default) — structure before colour */
:root, [data-theme="wireframe"] {
  /* TEXT — primary body text and headings */
  --ink: #111;
  /* TEXT — secondary / supporting text */
  --ink-secondary: #555;
  /* TEXT — placeholder, captions, de-emphasised labels */
  --ink-subtle: #888;
  /* TEXT — disabled state text and icons only */
  --ink-disabled: #b5b5b5;
  /* BORDER — primary dividers and input borders */
  --line: #d4d4d4;
  /* BORDER — subtle dividers, hover states, nested separators */
  --line-subtle: #ececec;
  /* SURFACE — page / panel background */
  --surface: #fff;
  /* SURFACE — recessed well, zebra row, input background */
  --surface-subtle: #f7f7f7;
  /* SURFACE — deeper recess, skeleton, overlay tint */
  --surface-muted: #efefef;
  /* SURFACE — card / tooltip that sits above the page surface */
  --surface-raised: var(--surface-subtle);
  /* SURFACE — second elevation tier (nested card, popover) */
  --surface-raised-2: var(--surface-muted);
  /* BORDER — edge of a raised surface (card, tooltip) */
  --border-raised: var(--line-subtle);
  /* ICON — default icon fill (not text, not accent) */
  --icon: var(--ink-secondary);
  /* ACCENT — highlight mark, the single thing to remember per composition (yellow). Not a fill colour. */
  --accent-mark: var(--ink);
  /* ACCENT — orange urgency / energy accent. Use for error and validation borders, urgency signals. Not a fill colour. Not for decorative use. Distinct from status-high-fill which signals a problem in data — this is an interactive state signal. */
  --accent-urgent: var(--ink);
  /* ACCENT — text / icon colour where accent-urgent appears as a foreground (e.g. error helper text) */
  --accent-urgent-ink: var(--surface);
  /* ACCENT — secondary interactive: links, toggles, calm CTAs (sky). Not orange, not yellow. */
  --accent-calm: var(--ink-secondary);
  /* ACCENT — text / icon on an accent-calm fill */
  --accent-calm-ink: var(--surface);
  /* ACCENT — hover state of an accent-calm element */
  --accent-calm-hover: var(--ink);
  /* STATUS — positive / success fill (green) */
  --status-low-fill: var(--surface);
  /* STATUS — text on a status-low fill */
  --status-low-ink: var(--ink);
  /* STATUS — warning / caution fill (yellow) */
  --status-medium-fill: var(--surface-subtle);
  /* STATUS — text on a status-medium fill */
  --status-medium-ink: var(--ink);
  /* STATUS — danger / urgent fill (orange). Distinct from accent-urgent: this signals a problem, not an action. */
  --status-high-fill: var(--ink);
  /* STATUS — text on a status-high fill */
  --status-high-ink: var(--surface);
  /* GRADIENT — brand accent gradient (orange → yellow). One per composition. */
  --accent-gradient: repeating-linear-gradient(90deg, var(--ink) 0 16px, var(--ink-subtle) 16px 32px, var(--ink-disabled) 32px 48px);
  /* SHADOW — subtle depth (divider-weight) */
  --shadow-1: rgba(17, 25, 30, 0.05);
  /* SHADOW — card / popover lift */
  --shadow-2: rgba(17, 25, 30, 0.08);
  /* SCRIM — modal / drawer overlay */
  --scrim: rgba(0, 0, 0, 0.35);
  /* FOCUS — keyboard focus ring (box-shadow form) */
  --focus-ring: 0 0 0 2px var(--ink);
  /* FOCUS — text input focus indicator */
  --focus-input: var(--ink);
  /* GRADIENT — full-page surface depth gradient */
  --surface-gradient: none;
  /* GRADIENT — corner ambient glow layered over surface-gradient */
  --ambient-glow: none;
}

/* Dark — navy surface (canonical FWF brand) */
[data-theme="dark"] {
  /* TEXT — primary body text and headings */
  --ink: #ffffff;
  /* TEXT — secondary / supporting text */
  --ink-secondary: #CCD4D7;
  /* TEXT — placeholder, captions, de-emphasised labels */
  --ink-subtle: #99AAB0;
  /* TEXT — disabled state text and icons only */
  --ink-disabled: var(--fwf-muted-blue);
  /* BORDER — primary dividers and input borders */
  --line: var(--fwf-muted-blue);
  /* BORDER — subtle dividers, hover states, nested separators */
  --line-subtle: #1d3a52;
  /* SURFACE — page / panel background */
  --surface: var(--fwf-navy);
  /* SURFACE — recessed well, zebra row, input background */
  --surface-subtle: #0e2742;
  /* SURFACE — deeper recess, skeleton, overlay tint */
  --surface-muted: #15324f;
  /* SURFACE — card / tooltip that sits above the page surface */
  --surface-raised: rgba(255, 255, 255, 0.045);
  /* SURFACE — second elevation tier (nested card, popover) */
  --surface-raised-2: rgba(255, 255, 255, 0.075);
  /* BORDER — edge of a raised surface (card, tooltip) */
  --border-raised: rgba(255, 255, 255, 0.10);
  /* ICON — default icon fill (not text, not accent) */
  --icon: var(--ink);
  /* ACCENT — highlight mark, the single thing to remember per composition (yellow). Not a fill colour. */
  --accent-mark: var(--fwf-yellow);
  /* ACCENT — orange urgency / energy accent. Use for error and validation borders, urgency signals. Not a fill colour. Not for decorative use. Distinct from status-high-fill which signals a problem in data — this is an interactive state signal. */
  --accent-urgent: var(--fwf-orange);
  /* ACCENT — text / icon colour where accent-urgent appears as a foreground (e.g. error helper text) */
  --accent-urgent-ink: #ffffff;
  /* ACCENT — secondary interactive: links, toggles, calm CTAs (sky). Not orange, not yellow. */
  --accent-calm: var(--fwf-sky);
  /* ACCENT — text / icon on an accent-calm fill */
  --accent-calm-ink: var(--fwf-navy);
  /* ACCENT — hover state of an accent-calm element */
  --accent-calm-hover: var(--fwf-sky60);
  /* STATUS — positive / success fill (green) */
  --status-low-fill: var(--fwf-green);
  /* STATUS — text on a status-low fill */
  --status-low-ink: var(--fwf-navy);
  /* STATUS — warning / caution fill (yellow) */
  --status-medium-fill: var(--fwf-yellow);
  /* STATUS — text on a status-medium fill */
  --status-medium-ink: var(--fwf-navy);
  /* STATUS — danger / urgent fill (orange). Distinct from accent-urgent: this signals a problem, not an action. */
  --status-high-fill: var(--fwf-orange);
  /* STATUS — text on a status-high fill */
  --status-high-ink: #ffffff;
  /* GRADIENT — brand accent gradient (orange → yellow). One per composition. */
  --accent-gradient: linear-gradient(90deg, var(--fwf-orange), var(--fwf-yellow));
  /* SHADOW — subtle depth (divider-weight) */
  --shadow-1: rgba(0, 0, 0, 0.28);
  /* SHADOW — card / popover lift */
  --shadow-2: rgba(0, 0, 0, 0.40);
  /* SCRIM — modal / drawer overlay */
  --scrim: rgba(0, 0, 0, 0.55);
  /* FOCUS — keyboard focus ring (box-shadow form) */
  --focus-ring: 0 0 0 2px var(--fwf-yellow);
  /* FOCUS — text input focus indicator */
  --focus-input: var(--fwf-sky);
  /* GRADIENT — full-page surface depth gradient */
  --surface-gradient: linear-gradient(160deg, var(--fwf-navy) 0%, var(--fwf-navy-mid) 58%, var(--fwf-navy-deep) 100%);
  /* GRADIENT — corner ambient glow layered over surface-gradient */
  --ambient-glow: radial-gradient(58% 52% at 86% 8%, rgba(254, 81, 0, 0.20) 0%, rgba(254, 198, 1, 0.07) 38%, transparent 72%);
}

/* Light (brand on white surfaces) */
[data-theme="light"] {
  /* TEXT — primary body text and headings */
  --ink: var(--fwf-navy);
  /* TEXT — secondary / supporting text */
  --ink-secondary: var(--fwf-charcoal);
  /* TEXT — placeholder, captions, de-emphasised labels */
  --ink-subtle: #808E95;
  /* TEXT — disabled state text and icons only */
  --ink-disabled: #B7C3C7;
  /* BORDER — primary dividers and input borders */
  --line: #CCD4D7;
  /* BORDER — subtle dividers, hover states, nested separators */
  --line-subtle: #E4F2F8;
  /* SURFACE — page / panel background */
  --surface: #ffffff;
  /* SURFACE — recessed well, zebra row, input background */
  --surface-subtle: #F1F8FB;
  /* SURFACE — deeper recess, skeleton, overlay tint */
  --surface-muted: #E4F2F8;
  /* SURFACE — card / tooltip that sits above the page surface */
  --surface-raised: var(--surface-subtle);
  /* SURFACE — second elevation tier (nested card, popover) */
  --surface-raised-2: var(--surface-muted);
  /* BORDER — edge of a raised surface (card, tooltip) */
  --border-raised: var(--line-subtle);
  /* ICON — default icon fill (not text, not accent) */
  --icon: #525252;
  /* ACCENT — highlight mark, the single thing to remember per composition (yellow). Not a fill colour. */
  --accent-mark: var(--fwf-yellow);
  /* ACCENT — orange urgency / energy accent. Use for error and validation borders, urgency signals. Not a fill colour. Not for decorative use. Distinct from status-high-fill which signals a problem in data — this is an interactive state signal. */
  --accent-urgent: var(--fwf-orange);
  /* ACCENT — text / icon colour where accent-urgent appears as a foreground (e.g. error helper text) */
  --accent-urgent-ink: #ffffff;
  /* ACCENT — secondary interactive: links, toggles, calm CTAs (sky). Not orange, not yellow. */
  --accent-calm: var(--fwf-sky);
  /* ACCENT — text / icon on an accent-calm fill */
  --accent-calm-ink: var(--fwf-navy);
  /* ACCENT — hover state of an accent-calm element */
  --accent-calm-hover: var(--fwf-muted-blue);
  /* STATUS — positive / success fill (green) */
  --status-low-fill: var(--fwf-green);
  /* STATUS — text on a status-low fill */
  --status-low-ink: var(--fwf-navy);
  /* STATUS — warning / caution fill (yellow) */
  --status-medium-fill: var(--fwf-yellow);
  /* STATUS — text on a status-medium fill */
  --status-medium-ink: var(--fwf-navy);
  /* STATUS — danger / urgent fill (orange). Distinct from accent-urgent: this signals a problem, not an action. */
  --status-high-fill: var(--fwf-orange);
  /* STATUS — text on a status-high fill */
  --status-high-ink: #ffffff;
  /* GRADIENT — brand accent gradient (orange → yellow). One per composition. */
  --accent-gradient: linear-gradient(90deg, var(--fwf-orange), var(--fwf-yellow));
  /* SHADOW — subtle depth (divider-weight) */
  --shadow-1: rgba(8, 27, 51, 0.06);
  /* SHADOW — card / popover lift */
  --shadow-2: rgba(8, 27, 51, 0.10);
  /* SCRIM — modal / drawer overlay */
  --scrim: rgba(8, 27, 51, 0.40);
  /* FOCUS — keyboard focus ring (box-shadow form) */
  --focus-ring: 0 0 0 2px var(--fwf-orange);
  /* FOCUS — text input focus indicator */
  --focus-input: var(--fwf-muted-blue);
  /* GRADIENT — full-page surface depth gradient */
  --surface-gradient: linear-gradient(160deg, #ffffff 0%, var(--surface-subtle) 100%);
  /* GRADIENT — corner ambient glow layered over surface-gradient */
  --ambient-glow: radial-gradient(55% 50% at 88% 6%, rgba(254, 81, 0, 0.06) 0%, transparent 70%);
}

/* ---------- Root application ---------- */
html, body { background-color: var(--surface); color: var(--ink); }
/* Depth: ambient glow layered over the surface gradient. Wireframe sets both to
   `none`, so it stays deliberately flat; brand themes carry the dark-blue gradient
   + corner glow. Fixed attachment keeps the glow in the corner while content scrolls. */
body {
  background-image: var(--ambient-glow), var(--surface-gradient);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: var(--font-body); font-size: var(--t-body-size); line-height: var(--t-body-lh);
}
h1, h2, h3, h4, h5 { font-family: var(--font-sans); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}