/*
 * GENERATED FILE - do not edit.
 * Source: design/tokens.json. Regenerate with `npm run gen:tokens`.
 */

:root {
  --color-surface: #303030;
  --color-surface-dim: #242424;
  --color-surface-bright: #414141;
  --color-surface-container-lowest: #242424;
  --color-surface-container-low: #383838;
  --color-surface-container: #414141;
  --color-surface-container-high: #4a4a4a;
  --color-surface-container-highest: #525252;
  --color-on-surface: #f7faf6;
  --color-on-surface-variant: #d6e5db;
  --color-inverse-surface: #123b31;
  --color-inverse-on-surface: #f7faf6;
  --color-outline: #8c8c8c;
  --color-outline-variant: #737373;
  --color-surface-tint: #2f7d4a;
  --color-primary: #123b31;
  --color-on-primary: #ffffff;
  --color-primary-container: #123b31;
  --color-on-primary-container: #bce98c;
  --color-inverse-primary: #bce98c;
  --color-secondary: #2f7d4a;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d6e5db;
  --color-on-secondary-container: #123b31;
  --color-tertiary: #240d00;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #421e00;
  --color-on-tertiary-container: #d97416;
  --color-error: #ffb4ab;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-primary-fixed: #d6e5db;
  --color-primary-fixed-dim: #bce98c;
  --color-on-primary-fixed: #123b31;
  --color-on-primary-fixed-variant: #2f7d4a;
  --color-secondary-fixed: #d6e5db;
  --color-secondary-fixed-dim: #bfd1c6;
  --color-on-secondary-fixed: #123b31;
  --color-on-secondary-fixed-variant: #2f7d4a;
  --color-tertiary-fixed: #ffdcc5;
  --color-tertiary-fixed-dim: #ffb783;
  --color-on-tertiary-fixed: #301400;
  --color-on-tertiary-fixed-variant: #713700;
  --color-background: #303030;
  --color-on-background: #f7faf6;
  --color-surface-variant: #414141;
  --color-card-surface: #414141;
  --color-card-text: #f7faf6;
  --color-card-secondary: #d6e5db;
  --color-card-border: #525252;
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-accent-hazard);
  --color-page: #141618;
  --color-label-muted: #9fb8ab;
  --color-recommendation: #2ce898;
  --color-on-recommendation: #0b2620;
  --color-telemetry: #6eb3f7;
  --color-on-telemetry: #0b2620;
  --color-action: #ff6d00;
  --color-on-action: #0b0c0d;
  --color-pane-border: #d6e5db30;
  --color-accent-shotline: #2ce898;
  --color-accent-hazard: #ff9f1c;
  --color-brand-pine: #123b31;
  --color-brand-sand: #f7f5ee;
  --color-brand-chalk: #f7faf6;
  --color-brand-charcoal: #0b2620;
  --color-brand-emerald: #2f7d4a;
  --color-brand-ochre: #e67e22;
  --color-brand-forest: #123b31;
  --color-brand-green: #2f7d4a;
  --color-brand-lime: #bce98c;
  --color-brand-ivory: #f7faf6;
  --color-brand-tint: #d6e5db;
  --color-brand-muted: #6f8579;
  --color-ground-native: #7a6450;
  --color-ground-native-dry: #9c8468;
  --color-telemetry-plate-dark: #0b2620;
  --color-telemetry-on-plate-dark: #f7faf6;
  --color-telemetry-plate-light: #f7faf6;
  --color-telemetry-on-plate-light: #0b2620;
  --color-telemetry-label-dark: #9fb8ab;
  --color-telemetry-label-light: #3a574c;
  --color-telemetry-rule-dark: #2c5a4d;
  --color-telemetry-rule-light: #cfddd3;
  --color-carbon-ground: #303030;
  --color-on-ground: #f7faf6;
  --color-on-ground-secondary: #d6e5db;
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-accent-hazard);
  --color-on-button-primary: #0b2620;
  --color-button-secondary: #414141;
  --color-on-button-secondary: #f7faf6;
  --color-button-border: #8c8c8c;
  --background-shell: linear-gradient(180deg, #1a4a3d 0%, #123b31 55%, #0b2620 100%);
  --background-context: linear-gradient(135deg, rgba(82,82,82,.85) 0%, rgba(65,65,65,.92) 100%);
  --background-thread: linear-gradient(160deg, #4a4a4a, #414141 50%, #383838);
  --background-hole-card: linear-gradient(160deg, rgba(42,68,54,.97), rgba(52,60,54,.99));

  /* Typography. Sunlight rule: body 24px, primary numbers 32px. */
  --font-metric-hero: 700 56px/60px "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --tracking-metric-hero: -0.03em;
  --font-metric-hero-mobile: 700 44px/48px "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --tracking-metric-hero-mobile: -0.02em;
  --font-metric-primary: 700 36px/40px "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --tracking-metric-primary: -0.02em;
  --font-metric-primary-mobile: 700 32px/36px "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --tracking-metric-primary-mobile: -0.02em;
  --font-headline-lg: 600 32px/40px "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --tracking-headline-lg: -0.01em;
  --font-headline-lg-mobile: 600 28px/34px "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --tracking-headline-lg-mobile: -0.01em;
  --font-headline-md: 600 26px/32px "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body-prominent: 500 24px/32px "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body-standard: 400 24px/32px "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-label-data: 600 20px/26px "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --tracking-label-data: 0.06em;
  --font-label-compact: 500 15px/20px "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --tracking-label-compact: 0.08em;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, monospace;

  /* The three floors from UI principle 7 and the design intake:
     body 24px, primary numbers 32px, and course-facing labels 20px
     (the 15px label-compact is for review indoors only). */
  --text-body: 24px;
  --text-number: 32px;
  --text-label: 20px;
  --text-secondary: 20px;

  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  --radius-button: 8px;
  --radius-chip: 6px;
  --space-gutter: 1rem;
  --space-margin: 1.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --touch-min: 56px;
  --border-card: 1px;
  --border-button: 1px;
  --border-pane: 1px;
  --shadow-button: none;
  --shadow-pane: inset 0 1px 0 #f7faf626, inset 0 -1px 0 #0005, 0 3px 7px #0005, 0 18px 36px -12px #0009, 0 -10px 35px -12px #d6e5db20;

  /* Elevation belongs to panes, including CardBox shells; controls are flat.
     The brand's separate shadow.offset is not emitted here. */
  --shadow-card: inset 0 1px 0 #f7faf626, inset 0 -1px 0 #0005, 0 3px 7px #0005, 0 18px 36px -12px #0009, 0 -10px 35px -12px #d6e5db20;
}

/* System dark, unless the player has pinned the light theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-surface: #303030;
    --color-surface-container: #414141;
    --color-surface-container-high: #4a4a4a;
    --color-on-surface: #f7faf6;
    --color-on-surface-variant: #d6e5db;
    --color-primary-container: #22603f;
    --color-accent-shotline: #2ce898;
    --color-accent-hazard: #ffb783;
    --color-accent-hazard-strong: #ff9f1c;
    --color-background: #303030;
    --color-on-background: #f7faf6;
    --color-surface-dim: #242424;
    --color-surface-bright: #414141;
    --color-surface-container-lowest: #242424;
    --color-surface-container-low: #383838;
    --color-surface-container-highest: #525252;
    --color-surface-variant: #414141;
    --color-outline: #8c8c8c;
    --color-outline-variant: #737373;
    --color-error: #ffb4ab;
    --color-card-surface: #414141;
    --color-card-text: #f7faf6;
    --color-card-secondary: #d6e5db;
    --color-card-border: #525252;
    --color-icon-accent: var(--color-accent-hazard);
    --color-button-primary: var(--color-accent-hazard);
    --shadow-card: inset 0 1px 0 #f7faf626, inset 0 -1px 0 #0005, 0 3px 7px #0005, 0 18px 36px -12px #0009, 0 -10px 35px -12px #d6e5db20;
  }
}

/* Explicitly chosen dark. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-surface: #303030;
  --color-surface-container: #414141;
  --color-surface-container-high: #4a4a4a;
  --color-on-surface: #f7faf6;
  --color-on-surface-variant: #d6e5db;
  --color-primary-container: #22603f;
  --color-accent-shotline: #2ce898;
  --color-accent-hazard: #ffb783;
  --color-accent-hazard-strong: #ff9f1c;
  --color-background: #303030;
  --color-on-background: #f7faf6;
  --color-surface-dim: #242424;
  --color-surface-bright: #414141;
  --color-surface-container-lowest: #242424;
  --color-surface-container-low: #383838;
  --color-surface-container-highest: #525252;
  --color-surface-variant: #414141;
  --color-outline: #8c8c8c;
  --color-outline-variant: #737373;
  --color-error: #ffb4ab;
  --color-card-surface: #414141;
  --color-card-text: #f7faf6;
  --color-card-secondary: #d6e5db;
  --color-card-border: #525252;
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-accent-hazard);
  --shadow-card: inset 0 1px 0 #f7faf626, inset 0 -1px 0 #0005, 0 3px 7px #0005, 0 18px 36px -12px #0009, 0 -10px 35px -12px #d6e5db20;
}

/* Theme a subtree: used by the card gallery to draw both themes at once. */
[data-theme-scope="light"] {
  color-scheme: light;
  --color-surface: #303030;
  --color-surface-dim: #242424;
  --color-surface-bright: #414141;
  --color-surface-container-lowest: #242424;
  --color-surface-container-low: #383838;
  --color-surface-container: #414141;
  --color-surface-container-high: #4a4a4a;
  --color-surface-container-highest: #525252;
  --color-on-surface: #f7faf6;
  --color-on-surface-variant: #d6e5db;
  --color-inverse-surface: #123b31;
  --color-inverse-on-surface: #f7faf6;
  --color-outline: #8c8c8c;
  --color-outline-variant: #737373;
  --color-surface-tint: #2f7d4a;
  --color-primary: #123b31;
  --color-on-primary: #ffffff;
  --color-primary-container: #123b31;
  --color-on-primary-container: #bce98c;
  --color-inverse-primary: #bce98c;
  --color-secondary: #2f7d4a;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d6e5db;
  --color-on-secondary-container: #123b31;
  --color-tertiary: #240d00;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #421e00;
  --color-on-tertiary-container: #d97416;
  --color-error: #ffb4ab;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-primary-fixed: #d6e5db;
  --color-primary-fixed-dim: #bce98c;
  --color-on-primary-fixed: #123b31;
  --color-on-primary-fixed-variant: #2f7d4a;
  --color-secondary-fixed: #d6e5db;
  --color-secondary-fixed-dim: #bfd1c6;
  --color-on-secondary-fixed: #123b31;
  --color-on-secondary-fixed-variant: #2f7d4a;
  --color-tertiary-fixed: #ffdcc5;
  --color-tertiary-fixed-dim: #ffb783;
  --color-on-tertiary-fixed: #301400;
  --color-on-tertiary-fixed-variant: #713700;
  --color-background: #303030;
  --color-on-background: #f7faf6;
  --color-surface-variant: #414141;
  --color-card-surface: #414141;
  --color-card-text: #f7faf6;
  --color-card-secondary: #d6e5db;
  --color-card-border: #525252;
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-accent-hazard);
  --color-page: #141618;
  --color-label-muted: #9fb8ab;
  --color-recommendation: #2ce898;
  --color-on-recommendation: #0b2620;
  --color-telemetry: #6eb3f7;
  --color-on-telemetry: #0b2620;
  --color-action: #ff6d00;
  --color-on-action: #0b0c0d;
  --color-pane-border: #d6e5db30;
  --color-accent-shotline: #2ce898;
  --color-accent-hazard: #ff9f1c;
  --color-brand-pine: #123b31;
  --color-brand-sand: #f7f5ee;
  --color-brand-chalk: #f7faf6;
  --color-brand-charcoal: #0b2620;
  --color-brand-emerald: #2f7d4a;
  --color-brand-ochre: #e67e22;
  --color-brand-forest: #123b31;
  --color-brand-green: #2f7d4a;
  --color-brand-lime: #bce98c;
  --color-brand-ivory: #f7faf6;
  --color-brand-tint: #d6e5db;
  --color-brand-muted: #6f8579;
  --color-ground-native: #7a6450;
  --color-ground-native-dry: #9c8468;
  --color-telemetry-plate-dark: #0b2620;
  --color-telemetry-on-plate-dark: #f7faf6;
  --color-telemetry-plate-light: #f7faf6;
  --color-telemetry-on-plate-light: #0b2620;
  --color-telemetry-label-dark: #9fb8ab;
  --color-telemetry-label-light: #3a574c;
  --color-telemetry-rule-dark: #2c5a4d;
  --color-telemetry-rule-light: #cfddd3;
  --color-carbon-ground: #303030;
  --color-on-ground: #f7faf6;
  --color-on-ground-secondary: #d6e5db;
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-accent-hazard);
  --color-on-button-primary: #0b2620;
  --color-button-secondary: #414141;
  --color-on-button-secondary: #f7faf6;
  --color-button-border: #8c8c8c;
}

[data-theme-scope="dark"] {
  color-scheme: dark;
  --color-surface: #303030;
  --color-surface-container: #414141;
  --color-surface-container-high: #4a4a4a;
  --color-on-surface: #f7faf6;
  --color-on-surface-variant: #d6e5db;
  --color-primary-container: #22603f;
  --color-accent-shotline: #2ce898;
  --color-accent-hazard: #ffb783;
  --color-accent-hazard-strong: #ff9f1c;
  --color-background: #303030;
  --color-on-background: #f7faf6;
  --color-surface-dim: #242424;
  --color-surface-bright: #414141;
  --color-surface-container-lowest: #242424;
  --color-surface-container-low: #383838;
  --color-surface-container-highest: #525252;
  --color-surface-variant: #414141;
  --color-outline: #8c8c8c;
  --color-outline-variant: #737373;
  --color-error: #ffb4ab;
  --color-card-surface: #414141;
  --color-card-text: #f7faf6;
  --color-card-secondary: #d6e5db;
  --color-card-border: #525252;
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-accent-hazard);
  --shadow-card: inset 0 1px 0 #f7faf626, inset 0 -1px 0 #0005, 0 3px 7px #0005, 0 18px 36px -12px #0009, 0 -10px 35px -12px #d6e5db20;
}