@font-face {
  font-display: swap;
  font-family: "Instrument Sans";
  font-stretch: 100%;
  font-style: normal;
  font-weight: 400 700;
  src: url("/fonts/instrument-sans-400-700.woff2") format("woff2");
}

:root {
  color-scheme: light;
  color: #1d2522;
  background: #f9fcfb;
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  /* Primitives */
  --graphite-0: #ffffff;
  --graphite-25: #f9fcfb;
  --graphite-50: #f5f8f6;
  --graphite-100: #eff3f2;
  --graphite-200: #e6ebe9;
  --graphite-300: #d6dcda;
  --graphite-400: #b8c0bc;
  --graphite-500: #8a938f;
  --graphite-600: #646e6a;
  --graphite-700: #56605c;
  --graphite-800: #39423e;
  --graphite-850: #28302c;
  --graphite-900: #1d2522;
  --graphite-925: #181e1b;
  --graphite-950: #131916;
  --graphite-975: #0e1311;
  --graphite-990: #080d0b;
  --coral-300: #ff958e;
  --coral-500: #fa5252;
  --coral-600: #d33a3d;
  --coral-700: #c33437;
  --red-100: #feecea;
  --red-200: #ffcdc8;
  --red-300: #ff958e;
  --red-400: #f06b66;
  --red-500: #c33437;
  --red-600: #a42127;
  --red-700: #7c1118;
  --red-800: #3a1a18;
  --orange-100: #feece3;
  --orange-200: #fecfb9;
  --orange-300: #f2a680;
  --orange-400: #dd7f4e;
  --orange-500: #b65416;
  --orange-600: #923e01;
  --orange-700: #6d2c00;
  --orange-800: #35190a;
  --yellow-100: #fff3e0;
  --yellow-200: #f4d9b9;
  --yellow-300: #e8b86a;
  --yellow-400: #d1984c;
  --yellow-500: #b4761a;
  --yellow-600: #905c01;
  --yellow-700: #6e4601;
  --yellow-800: #3a2a10;
  --green-100: #e6f4ea;
  --green-200: #c5e4ce;
  --green-300: #7fcb9b;
  --green-400: #67ad81;
  --green-500: #2e7d4f;
  --green-600: #226b42;
  --green-700: #124f2e;
  --green-800: #14301f;
  --blue-100: #e7f1ff;
  --blue-200: #c6ddfb;
  --blue-300: #97beef;
  --blue-400: #6d9edc;
  --blue-500: #4376b6;
  --blue-600: #2e5c95;
  --blue-700: #1d4371;
  --blue-800: #142235;
  --purple-100: #f4ecfe;
  --purple-200: #e2d3f6;
  --purple-300: #c7ade8;
  --purple-400: #ab89d2;
  --purple-500: #8560ac;
  --purple-600: #69498c;
  --purple-700: #4e336a;
  --purple-800: #261c32;
  --pink-100: #ffeaf2;
  --pink-200: #faccdf;
  --pink-300: #eca1c1;
  --pink-400: #d579a3;
  --pink-500: #ae4e7d;
  --pink-600: #8d3862;
  --pink-700: #6a2648;
  --pink-800: #331724;

  /* Surfaces and ink */
  --ground: var(--graphite-25);
  --surface: var(--graphite-0);
  --sunken: var(--graphite-100);
  --line: var(--graphite-200);
  --line-strong: var(--graphite-300);
  --ink: var(--graphite-900);
  --ink-2: var(--graphite-700);
  --ink-3: var(--graphite-600);
  --ink-disabled: var(--graphite-500);
  --placeholder: var(--graphite-600);

  /* Brand */
  --brand: var(--coral-500);
  --brand-fill: var(--coral-600);
  --on-brand: #ffffff;
  --brand-text: var(--coral-700);
  --focus-ring: var(--coral-700);

  /* Signals */
  --signal-negative: #c33437;
  --signal-negative-text: #c33437;
  --signal-negative-wash: #feecea;
  --signal-caution: #b4761a;
  --signal-caution-text: #936015;
  --signal-caution-wash: #fff3e0;
  --signal-positive: #2e7d4f;
  --signal-positive-text: #2c774b;
  --signal-positive-wash: #e6f4ea;
  --status-good: var(--signal-positive);
  --status-warning: var(--signal-caution);
  --status-critical: var(--signal-negative);
  --status-notice: var(--ink-3);
  --priority: var(--signal-negative);

  /* Evidence */
  --evidence-full: #1d2522;
  --evidence-partial: #56605c;
  --evidence-none: #646e6a;
  --evidence-wash: var(--sunken);

  /* Magnitude: good to bad */
  --magnitude-100: #2e7d4f;
  --magnitude-200: #78955c;
  --magnitude-300: #afa562;
  --magnitude-400: #e8b86a;
  --magnitude-500: #df9058;
  --magnitude-600: #db6d4f;
  --magnitude-700: #c33437;

  /* Type */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-display-size: 40px;
  --type-display-line: 44px;
  --type-display-weight: 600;
  --type-display-tracking: -0.022em;
  --type-verdict-size: 28px;
  --type-verdict-line: 40px;
  --type-verdict-weight: 400;
  --type-verdict-tracking: -0.01em;
  --type-h2-size: 24px;
  --type-h2-line: 32px;
  --type-h2-weight: 600;
  --type-h2-tracking: -0.018em;
  --type-h3-size: 19px;
  --type-h3-line: 24px;
  --type-h3-weight: 600;
  --type-h3-tracking: -0.008em;
  --type-metric-lg-size: 34px;
  --type-metric-lg-line: 40px;
  --type-metric-size: 26px;
  --type-metric-line: 32px;
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-small-size: 14px;
  --type-small-line: 20px;
  --type-metric-label-size: 14px;
  --type-metric-label-line: 20px;
  --type-label-size: 12px;
  --type-label-line: 16px;
  --type-evidence-size: 12px;
  --type-evidence-line: 16px;
  --tracking-figures-lg: 0.02em;
  --tracking-figures: 0.01em;
  --tracking-label: 0.08em;

  /* Shape, space, depth and motion */
  --radius-none: 0;
  --radius-marker: 2px;
  --radius-control: 4px;
  --radius-container: 6px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 96px;
  --pad-tile: 20px;
  --pad-card: 24px;
  --gap-section: 72px;
  --shadow-overlay: 0 8px 24px -8px rgba(14, 19, 17, 0.18);
  --duration-1: 80ms;
  --duration-2: 120ms;
  --duration-3: 160ms;
  --duration-4: 180ms;
  --duration-5: 200ms;

  /* Workspace compatibility aliases. New component code uses the semantic tokens above. */
  --disabled: var(--ink-disabled);
  --rail: var(--graphite-950);
  --rail-surface: var(--graphite-900);
  --rail-ink: var(--graphite-50);
  --brand-fill-hover: var(--coral-700);
  --brand-wash: var(--sunken);
  --good: var(--signal-positive-text);
  --good-solid: var(--signal-positive);
  --good-wash: var(--signal-positive-wash);
  --watch: var(--signal-caution-text);
  --watch-solid: var(--signal-caution);
  --watch-wash: var(--signal-caution-wash);
  --priority-solid: var(--signal-negative);
  --priority-wash: var(--signal-negative-wash);
  --none: var(--evidence-none);
  --none-solid: var(--evidence-none);
  --none-wash: var(--evidence-wash);
  --chart-demand: var(--orange-500);
  --chart-floor: var(--blue-500);
  --chart-kitchen: var(--purple-500);
  --chart-bar: var(--pink-500);
  --overlay: var(--shadow-overlay);

  --emilia-coral: var(--brand);
  --emilia-coral-dark: var(--brand-text);
  --emilia-indigo: var(--rail);
  --emilia-purple: var(--purple-600);
  --emilia-background: var(--ground);
  --emilia-blush: var(--sunken);
  --emilia-ink: var(--ink);
  --emilia-gray: var(--ink-2);
  --emilia-border: var(--line);
  --emilia-destructive: var(--signal-negative);
  --emilia-surface: var(--surface);
  --emilia-surface-muted: var(--sunken);
  --emilia-surface-strong: var(--sunken);
  --emilia-text: var(--ink);
  --emilia-text-muted: var(--ink-2);
  --emilia-text-on-dark: var(--rail-ink);
  --emilia-text-on-dark-muted: var(--graphite-400);
  --emilia-action-primary: var(--brand-fill);
  --emilia-action-primary-foreground: var(--on-brand);
  --emilia-action-primary-hover: var(--brand-text);
  --emilia-action-secondary: var(--ink);
  --emilia-input-border: var(--line-strong);
  --emilia-focus-ring: var(--focus-ring);
  --emilia-signal-positive: var(--signal-positive-text);
  --emilia-signal-positive-soft: var(--signal-positive-wash);
  --emilia-signal-warning: var(--signal-caution-text);
  --emilia-signal-warning-soft: var(--signal-caution-wash);
  --emilia-signal-critical: var(--signal-negative-text);
  --emilia-signal-critical-soft: var(--signal-negative-wash);
  --emilia-signal-neutral: var(--evidence-none);
  --emilia-signal-neutral-soft: var(--evidence-wash);
  --emilia-font-display: var(--font-sans);
  --emilia-font-body: var(--font-sans);
  --emilia-font-evidence: var(--font-sans);
  --emilia-font-number: var(--font-sans);
  --emilia-text-display: var(--type-display-size);
  --emilia-text-page-title: var(--type-display-size);
  --emilia-text-component-title: var(--type-h3-size);
  --emilia-text-body: var(--type-body-size);
  --emilia-text-support: var(--type-small-size);
  --emilia-leading-display: calc(var(--type-display-line) / var(--type-display-size));
  --emilia-leading-title: calc(var(--type-h3-line) / var(--type-h3-size));
  --emilia-leading-body: calc(var(--type-body-line) / var(--type-body-size));
  --emilia-leading-support: calc(var(--type-small-line) / var(--type-small-size));
  --emilia-radius: var(--radius-container);
  --emilia-radius-control: var(--radius-control);
  --emilia-radius-pill: var(--radius-pill);
  --emilia-shadow-soft: none;
  --emilia-shadow-control: none;
  --emilia-shadow-dialog: var(--shadow-overlay);
  --emilia-link: var(--brand-text);
  --emilia-error-surface: var(--signal-negative-wash);
  --emilia-error-border: var(--signal-negative);
  --emilia-error-text: var(--signal-negative-text);
  --emilia-chart-floor: var(--chart-floor);
  --emilia-chart-kitchen: var(--chart-kitchen);
  --emilia-chart-bar: var(--chart-bar);
  --emilia-space-4: var(--space-1);
  --emilia-space-8: var(--space-2);
  --emilia-space-12: var(--space-3);
  --emilia-space-16: var(--space-4);
  --emilia-space-20: var(--pad-tile);
  --emilia-space-24: var(--space-5);
  --emilia-space-32: var(--space-6);
  --emilia-space-40: 40px;
  --emilia-space-48: var(--space-7);
  --emilia-space-72: var(--space-8);
  --emilia-space-96: var(--space-9);
  --emilia-type-body: var(--type-body-size);
  --emilia-type-small: var(--type-small-size);
  --emilia-type-label: var(--type-label-size);
  --emilia-type-evidence: var(--type-evidence-size);
  --emilia-type-h3: var(--type-h3-size);
  --emilia-type-metric: var(--type-metric-size);
  --emilia-type-metric-lg: var(--type-metric-lg-size);

  --accent: var(--brand);
  --accent-strong: var(--brand-text);
  --border: var(--line);
  --muted: var(--ink-2);
  --navy: var(--rail);
  --navy-soft: var(--rail-surface);
  --surface-strong: var(--sunken);
  --text: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    color: #f5f8f6;
    background: #0e1311;
    --ground: var(--graphite-975);
    --surface: var(--graphite-925);
    --sunken: var(--graphite-990);
    --line: var(--graphite-850);
    --line-strong: var(--graphite-800);
    --ink: var(--graphite-50);
    --ink-2: var(--graphite-300);
    --ink-3: var(--graphite-400);
    --ink-disabled: var(--graphite-600);
    --placeholder: var(--graphite-500);
    --brand-text: var(--coral-300);
    --focus-ring: var(--coral-300);
    --signal-negative: #ff958e;
    --signal-negative-text: #ff958e;
    --signal-negative-wash: #3a1a18;
    --signal-caution: #e8b86a;
    --signal-caution-text: #e8b86a;
    --signal-caution-wash: #3a2a10;
    --signal-positive: #7fcb9b;
    --signal-positive-text: #7fcb9b;
    --signal-positive-wash: #14301f;
    --evidence-full: #f5f8f6;
    --evidence-partial: #d6dcda;
    --evidence-none: #b8c0bc;
    --magnitude-100: #7fcb9b;
    --magnitude-200: #a8c68c;
    --magnitude-300: #cac07c;
    --magnitude-400: #e8b86a;
    --magnitude-500: #f0ad77;
    --magnitude-600: #f8a183;
    --magnitude-700: #ff958e;
    --shadow-overlay: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  color: #f5f8f6;
  background: #0e1311;
  --ground: var(--graphite-975);
  --surface: var(--graphite-925);
  --sunken: var(--graphite-990);
  --line: var(--graphite-850);
  --line-strong: var(--graphite-800);
  --ink: var(--graphite-50);
  --ink-2: var(--graphite-300);
  --ink-3: var(--graphite-400);
  --ink-disabled: var(--graphite-600);
  --placeholder: var(--graphite-500);
  --brand-text: var(--coral-300);
  --focus-ring: var(--coral-300);
  --signal-negative: #ff958e;
  --signal-negative-text: #ff958e;
  --signal-negative-wash: #3a1a18;
  --signal-caution: #e8b86a;
  --signal-caution-text: #e8b86a;
  --signal-caution-wash: #3a2a10;
  --signal-positive: #7fcb9b;
  --signal-positive-text: #7fcb9b;
  --signal-positive-wash: #14301f;
  --evidence-full: #f5f8f6;
  --evidence-partial: #d6dcda;
  --evidence-none: #b8c0bc;
  --magnitude-100: #7fcb9b;
  --magnitude-200: #a8c68c;
  --magnitude-300: #cac07c;
  --magnitude-400: #e8b86a;
  --magnitude-500: #f0ad77;
  --magnitude-600: #f8a183;
  --magnitude-700: #ff958e;
  --shadow-overlay: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

.emilia-display,
.emilia-page-title {
  font-family: var(--font-sans);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  line-height: var(--type-display-line);
}

.emilia-component-title {
  font-family: var(--font-sans);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
  line-height: var(--type-h3-line);
}

.emilia-metric {
  font-family: var(--font-sans);
  font-variant-numeric: proportional-nums;
  font-weight: 600;
  letter-spacing: var(--tracking-figures-lg);
}

.emilia-evidence,
code,
kbd,
samp {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
