/*
 * 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-card-caddie: var(--surface-assistant);
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-action);
  --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: #000000;
  --color-pocket-lock: #000000;
  --color-pane-border: #d6e5db30;
  --color-accent-shotline: #2ce898;
  --color-accent-hazard: #ff9f1c;
  --color-rose-700: #9d1a5e;
  --color-rose-600: #c2185b;
  --color-rose-500: #e8317a;
  --color-rose-400: #f472b6;
  --color-rose-300: #f9a8d4;
  --color-rose-200: #fce7f3;
  --color-rose-100: #fdf2f8;
  --color-pending: var(--color-rose-300);
  --color-on-mine: #ffffff;
  --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-sky-blue-a: #172d40;
  --color-sky-blue-b: #28465b;
  --color-sky-slate-a: #25333f;
  --color-sky-slate-b: #354955;
  --color-sky-coast-a: #1b303a;
  --color-sky-coast-b: #263d49;
  --color-sky-coast-c: #304653;
  --color-sky-grey: #3a3f44;
  --color-sky-night-a: #0b1923;
  --color-sky-night-b: #142a33;
  --color-sky-night-c: #203743;
  --color-cloud-moon: #82969e;
  --color-frost-thin: #d1dbff;
  --color-frost-thick: #ebf5ff;
  --color-ground-native: #7a6450;
  --color-ground-native-dry: #9c8468;
  --color-map-water: #6c8fa8;
  --color-map-hole-ground: #2a4436;
  --color-stance-ground: #789683;
  --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-action);
  --color-on-button-primary: var(--color-on-action);
  --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-thread: linear-gradient(160deg, #4a4a4a, #414141 50%, #383838);
  --background-hole-card: linear-gradient(160deg, rgba(42,68,54,.97), rgba(52,60,54,.99));
  --surface-shell: linear-gradient(180deg, #1a4a3d 0%, #123b31 55%, #0b2620 100%);
  --surface-context: linear-gradient(180deg, #414141, #383838);
  --surface-row-current: linear-gradient(135deg, rgba(44,232,152,.16), rgba(44,232,152,.05)), var(--color-brand-charcoal);
  --surface-thread: linear-gradient(160deg, #4a4a4a 0%, #414141 50%, #383838 100%);
  --surface-thread-header: linear-gradient(180deg, rgba(72,72,72,.97), rgba(60,60,60,.88));
  --surface-composer: linear-gradient(0deg, rgba(40,40,40,.97), rgba(55,55,55,.75));
  --surface-composer-opaque: #383838;
  --surface-composer-field: linear-gradient(135deg, rgba(65,65,65,.85), rgba(52,52,52,.95));
  --surface-assistant: linear-gradient(135deg, rgba(82,82,82,.85), rgba(65,65,65,.92));
  --surface-mine: linear-gradient(145deg, #f472b6 0%, #e8317a 45%, #d97416 100%);
  --surface-action: linear-gradient(135deg, #ff6d00, #ff6300);
  --surface-hole-card: linear-gradient(160deg, rgba(42,68,54,.97), rgba(52,60,54,.99));
  --surface-swing-card: linear-gradient(160deg, rgba(42,68,50,.97) 0%, rgba(52,62,50,.99) 100%);
  --surface-dialog: linear-gradient(160deg, #414141, #242424);
  --surface-backdrop: rgba(11,12,13,.75);
  --surface-telemetry: rgba(52,68,58,.88);
  --veil-mine: rgba(0,0,0,.45);
  --blur-header: 12px;
  --blur-composer: 16px;
  --blur-telemetry: 6px;
  --edge-pine-18: rgba(47,125,74,.18);
  --edge-pine-28: rgba(47,125,74,.28);
  --edge-pine-50: rgba(47,125,74,.5);
  --edge-mint-pill: rgba(44,232,152,.24);
  --edge-carbon-50: rgba(56,56,56,.5);
  --shadow-showcase-card: 0 2px 6px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.16);
  --shadow-showcase-button: 0 2px 3px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
  --shadow-showcase-mine: 0 4px 16px rgba(232,49,122,.3), 0 1px 3px rgba(0,0,0,.35);

  /* 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;

  /* M32-03 T03-1 (#540): title/body/metric/label/meta hierarchy over the
     fixed course floors (body 24px, metric 32px, label 20px, touch 56px). */
  --type-title-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --type-title-size: 28px;
  --type-title-line-height: 34px;
  --type-title-weight: 600;
  --type-title-tracking: -0.035em;
  --type-body-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --type-body-size: 24px;
  --type-body-line-height: 36px;
  --type-body-weight: 400;
  --type-metric-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --type-metric-size: 32px;
  --type-metric-line-height: 36px;
  --type-metric-weight: 700;
  --type-metric-tracking: -0.02em;
  --type-label-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --type-label-size: 20px;
  --type-label-line-height: 26px;
  --type-label-weight: 600;
  --type-label-tracking: 0.06em;
  --type-meta-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --type-meta-size: 20px;
  --type-meta-line-height: 26px;
  --type-meta-weight: 400;
  --type-meta-color: var(--color-telemetry);

  --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;
  --radius-action: 8px;
  --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-card-caddie: var(--surface-assistant);
    --color-icon-accent: var(--color-accent-hazard);
    --color-button-primary: var(--color-action);
    --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;
    --surface-shell: linear-gradient(180deg, #1a4a3d 0%, #123b31 55%, #0b2620 100%);
    --surface-context: linear-gradient(180deg, #414141, #383838);
    --surface-row-current: linear-gradient(135deg, rgba(44,232,152,.16), rgba(44,232,152,.05)), var(--color-brand-charcoal);
    --surface-thread: linear-gradient(160deg, #4a4a4a 0%, #414141 50%, #383838 100%);
    --surface-thread-header: linear-gradient(180deg, rgba(72,72,72,.97), rgba(60,60,60,.88));
    --surface-composer: linear-gradient(0deg, rgba(40,40,40,.97), rgba(55,55,55,.75));
    --surface-composer-opaque: #383838;
    --surface-composer-field: linear-gradient(135deg, rgba(65,65,65,.85), rgba(52,52,52,.95));
    --surface-assistant: linear-gradient(135deg, rgba(82,82,82,.85), rgba(65,65,65,.92));
    --surface-mine: linear-gradient(145deg, #f472b6 0%, #e8317a 45%, #d97416 100%);
    --surface-action: linear-gradient(135deg, #ff6d00, #ff6300);
    --surface-hole-card: linear-gradient(160deg, rgba(42,68,54,.97), rgba(52,60,54,.99));
    --surface-swing-card: linear-gradient(160deg, rgba(42,68,50,.97) 0%, rgba(52,62,50,.99) 100%);
    --surface-dialog: linear-gradient(160deg, #414141, #242424);
    --surface-backdrop: rgba(11,12,13,.75);
    --surface-telemetry: rgba(52,68,58,.88);
    --veil-mine: rgba(0,0,0,.45);
    --blur-header: 12px;
    --blur-composer: 16px;
    --blur-telemetry: 6px;
    --edge-pine-18: rgba(47,125,74,.18);
    --edge-pine-28: rgba(47,125,74,.28);
    --edge-pine-50: rgba(47,125,74,.5);
    --edge-mint-pill: rgba(44,232,152,.24);
    --edge-carbon-50: rgba(56,56,56,.5);
    --shadow-showcase-card: 0 2px 6px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.16);
    --shadow-showcase-button: 0 2px 3px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
    --shadow-showcase-mine: 0 4px 16px rgba(232,49,122,.3), 0 1px 3px rgba(0,0,0,.35);
  }
}

/* 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-card-caddie: var(--surface-assistant);
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-action);
  --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;
  --surface-shell: linear-gradient(180deg, #1a4a3d 0%, #123b31 55%, #0b2620 100%);
  --surface-context: linear-gradient(180deg, #414141, #383838);
  --surface-row-current: linear-gradient(135deg, rgba(44,232,152,.16), rgba(44,232,152,.05)), var(--color-brand-charcoal);
  --surface-thread: linear-gradient(160deg, #4a4a4a 0%, #414141 50%, #383838 100%);
  --surface-thread-header: linear-gradient(180deg, rgba(72,72,72,.97), rgba(60,60,60,.88));
  --surface-composer: linear-gradient(0deg, rgba(40,40,40,.97), rgba(55,55,55,.75));
  --surface-composer-opaque: #383838;
  --surface-composer-field: linear-gradient(135deg, rgba(65,65,65,.85), rgba(52,52,52,.95));
  --surface-assistant: linear-gradient(135deg, rgba(82,82,82,.85), rgba(65,65,65,.92));
  --surface-mine: linear-gradient(145deg, #f472b6 0%, #e8317a 45%, #d97416 100%);
  --surface-action: linear-gradient(135deg, #ff6d00, #ff6300);
  --surface-hole-card: linear-gradient(160deg, rgba(42,68,54,.97), rgba(52,60,54,.99));
  --surface-swing-card: linear-gradient(160deg, rgba(42,68,50,.97) 0%, rgba(52,62,50,.99) 100%);
  --surface-dialog: linear-gradient(160deg, #414141, #242424);
  --surface-backdrop: rgba(11,12,13,.75);
  --surface-telemetry: rgba(52,68,58,.88);
  --veil-mine: rgba(0,0,0,.45);
  --blur-header: 12px;
  --blur-composer: 16px;
  --blur-telemetry: 6px;
  --edge-pine-18: rgba(47,125,74,.18);
  --edge-pine-28: rgba(47,125,74,.28);
  --edge-pine-50: rgba(47,125,74,.5);
  --edge-mint-pill: rgba(44,232,152,.24);
  --edge-carbon-50: rgba(56,56,56,.5);
  --shadow-showcase-card: 0 2px 6px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.16);
  --shadow-showcase-button: 0 2px 3px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
  --shadow-showcase-mine: 0 4px 16px rgba(232,49,122,.3), 0 1px 3px rgba(0,0,0,.35);
}

/* 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-card-caddie: var(--surface-assistant);
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-action);
  --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: #000000;
  --color-pocket-lock: #000000;
  --color-pane-border: #d6e5db30;
  --color-accent-shotline: #2ce898;
  --color-accent-hazard: #ff9f1c;
  --color-rose-700: #9d1a5e;
  --color-rose-600: #c2185b;
  --color-rose-500: #e8317a;
  --color-rose-400: #f472b6;
  --color-rose-300: #f9a8d4;
  --color-rose-200: #fce7f3;
  --color-rose-100: #fdf2f8;
  --color-pending: var(--color-rose-300);
  --color-on-mine: #ffffff;
  --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-sky-blue-a: #172d40;
  --color-sky-blue-b: #28465b;
  --color-sky-slate-a: #25333f;
  --color-sky-slate-b: #354955;
  --color-sky-coast-a: #1b303a;
  --color-sky-coast-b: #263d49;
  --color-sky-coast-c: #304653;
  --color-sky-grey: #3a3f44;
  --color-sky-night-a: #0b1923;
  --color-sky-night-b: #142a33;
  --color-sky-night-c: #203743;
  --color-cloud-moon: #82969e;
  --color-frost-thin: #d1dbff;
  --color-frost-thick: #ebf5ff;
  --color-ground-native: #7a6450;
  --color-ground-native-dry: #9c8468;
  --color-map-water: #6c8fa8;
  --color-map-hole-ground: #2a4436;
  --color-stance-ground: #789683;
  --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-action);
  --color-on-button-primary: var(--color-on-action);
  --color-button-secondary: #414141;
  --color-on-button-secondary: #f7faf6;
  --color-button-border: #8c8c8c;
  --surface-shell: linear-gradient(180deg, #1a4a3d 0%, #123b31 55%, #0b2620 100%);
  --surface-context: linear-gradient(180deg, #414141, #383838);
  --surface-row-current: linear-gradient(135deg, rgba(44,232,152,.16), rgba(44,232,152,.05)), var(--color-brand-charcoal);
  --surface-thread: linear-gradient(160deg, #4a4a4a 0%, #414141 50%, #383838 100%);
  --surface-thread-header: linear-gradient(180deg, rgba(72,72,72,.97), rgba(60,60,60,.88));
  --surface-composer: linear-gradient(0deg, rgba(40,40,40,.97), rgba(55,55,55,.75));
  --surface-composer-opaque: #383838;
  --surface-composer-field: linear-gradient(135deg, rgba(65,65,65,.85), rgba(52,52,52,.95));
  --surface-assistant: linear-gradient(135deg, rgba(82,82,82,.85), rgba(65,65,65,.92));
  --surface-mine: linear-gradient(145deg, #f472b6 0%, #e8317a 45%, #d97416 100%);
  --surface-action: linear-gradient(135deg, #ff6d00, #ff6300);
  --surface-hole-card: linear-gradient(160deg, rgba(42,68,54,.97), rgba(52,60,54,.99));
  --surface-swing-card: linear-gradient(160deg, rgba(42,68,50,.97) 0%, rgba(52,62,50,.99) 100%);
  --surface-dialog: linear-gradient(160deg, #414141, #242424);
  --surface-backdrop: rgba(11,12,13,.75);
  --surface-telemetry: rgba(52,68,58,.88);
  --veil-mine: rgba(0,0,0,.45);
  --blur-header: 12px;
  --blur-composer: 16px;
  --blur-telemetry: 6px;
  --edge-pine-18: rgba(47,125,74,.18);
  --edge-pine-28: rgba(47,125,74,.28);
  --edge-pine-50: rgba(47,125,74,.5);
  --edge-mint-pill: rgba(44,232,152,.24);
  --edge-carbon-50: rgba(56,56,56,.5);
  --shadow-showcase-card: 0 2px 6px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.16);
  --shadow-showcase-button: 0 2px 3px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
  --shadow-showcase-mine: 0 4px 16px rgba(232,49,122,.3), 0 1px 3px rgba(0,0,0,.35);
}

[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-card-caddie: var(--surface-assistant);
  --color-icon-accent: var(--color-accent-hazard);
  --color-button-primary: var(--color-action);
  --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;
  --surface-shell: linear-gradient(180deg, #1a4a3d 0%, #123b31 55%, #0b2620 100%);
  --surface-context: linear-gradient(180deg, #414141, #383838);
  --surface-row-current: linear-gradient(135deg, rgba(44,232,152,.16), rgba(44,232,152,.05)), var(--color-brand-charcoal);
  --surface-thread: linear-gradient(160deg, #4a4a4a 0%, #414141 50%, #383838 100%);
  --surface-thread-header: linear-gradient(180deg, rgba(72,72,72,.97), rgba(60,60,60,.88));
  --surface-composer: linear-gradient(0deg, rgba(40,40,40,.97), rgba(55,55,55,.75));
  --surface-composer-opaque: #383838;
  --surface-composer-field: linear-gradient(135deg, rgba(65,65,65,.85), rgba(52,52,52,.95));
  --surface-assistant: linear-gradient(135deg, rgba(82,82,82,.85), rgba(65,65,65,.92));
  --surface-mine: linear-gradient(145deg, #f472b6 0%, #e8317a 45%, #d97416 100%);
  --surface-action: linear-gradient(135deg, #ff6d00, #ff6300);
  --surface-hole-card: linear-gradient(160deg, rgba(42,68,54,.97), rgba(52,60,54,.99));
  --surface-swing-card: linear-gradient(160deg, rgba(42,68,50,.97) 0%, rgba(52,62,50,.99) 100%);
  --surface-dialog: linear-gradient(160deg, #414141, #242424);
  --surface-backdrop: rgba(11,12,13,.75);
  --surface-telemetry: rgba(52,68,58,.88);
  --veil-mine: rgba(0,0,0,.45);
  --blur-header: 12px;
  --blur-composer: 16px;
  --blur-telemetry: 6px;
  --edge-pine-18: rgba(47,125,74,.18);
  --edge-pine-28: rgba(47,125,74,.28);
  --edge-pine-50: rgba(47,125,74,.5);
  --edge-mint-pill: rgba(44,232,152,.24);
  --edge-carbon-50: rgba(56,56,56,.5);
  --shadow-showcase-card: 0 2px 6px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.16);
  --shadow-showcase-button: 0 2px 3px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12);
  --shadow-showcase-mine: 0 4px 16px rgba(232,49,122,.3), 0 1px 3px rgba(0,0,0,.35);
}