/* GENERATED — DO NOT EDIT.
   Copied from docs/brand-kit/tokens.css by docs/brand-kit/tools/sync-tokens.mjs.
   Edit the source there and re-run; a stale copy fails CI. */
/* SeaCras brand tokens — GENERATED FILE, DO NOT EDIT.
   Source of truth: docs/brand-kit/tokens.json
   Regenerate:      node docs/brand-kit/tools/generate.mjs
   Kit version:     2.1.1 */

:root {

  /* ---- Raw brand palette (brand moments only; apps use the semantic layer) ---- */
  --sc-blue: #149CD8;
  --sc-blue-deep: #2E5A9B;
  --sc-navy: #375786;
  --sc-blue-shade: #127CB3;
  --sc-red: #E20E18;
  --sc-black: #000000;
  --sc-white: #FFFFFF;
  --sc-blue-tints-20: #D0EBF7;
  --sc-blue-tints-40: #A1D7EF;
  --sc-blue-tints-60: #72C4E8;
  --sc-blue-tints-80: #43B0E0;
  --sc-blue-dark-60: #0B5C84;
  --sc-blue-dark-70: #0F6E9E;
  --sc-blue-dark-ink: #0B3A5C;
  --sc-gray-10: #E6E6E6;
  --sc-gray-20: #CCCCCC;
  --sc-gray-40: #999999;
  --sc-gray-60: #666666;
  --sc-gray-80: #333333;
  --sc-neutral-0: #FFFFFF;
  --sc-neutral-50: #F7FAFC;
  --sc-neutral-100: #F0F6FA;
  --sc-neutral-200: #E1EAF2;
  --sc-neutral-300: #C8D6E3;
  --sc-neutral-400: #9AAEC1;
  --sc-neutral-500: #6E8598;
  --sc-neutral-600: #516576;
  --sc-neutral-700: #3B4C5A;
  --sc-neutral-800: #26333D;
  --sc-neutral-900: #141D24;
  --sc-neutral-950: #0B1B2B;
  --sc-bg-tint: #F0F6FA;

  /* ---- Gradients ---- */
  --sc-gradient-brand: linear-gradient(45deg, #149CD8 0%, #2E5A9B 100%);
  --sc-gradient-brand-deep: linear-gradient(45deg, #2E5A9B 0%, #0B3A5C 100%);
  --sc-gradient: var(--sc-gradient-brand); /* legacy alias */

  /* ---- Status / water quality (GD-2). Never encode status by color alone. ---- */
  --sc-status-good: #3FC4D6;
  --sc-status-good-on-light: #0D737E;
  --sc-status-good-on-dark: #5FD6E4;
  --sc-status-moderate: #F0C24B;
  --sc-status-moderate-on-light: #7A5A00;
  --sc-status-moderate-on-dark: #F0C24B;
  --sc-status-poor: #E2662A;
  --sc-status-poor-on-light: #A6431A;
  --sc-status-poor-on-dark: #FF8B54;
  --sc-status-alert: #8E1420;
  --sc-status-alert-on-light: #8E1420;
  --sc-status-alert-on-dark: #FF8A8A;
  --sc-status-info: #149CD8;
  --sc-status-info-on-light: #0F6E9E;
  --sc-status-info-on-dark: #5CB8E8;
  --sc-status-neutral: #9AAEC1;
  --sc-status-neutral-on-light: #516576;
  --sc-status-neutral-on-dark: #9AAEC1;

  /* ---- Typography (GD-3) ---- */
  --sc-font-display: Stainless, Poppins, "Segoe UI", system-ui, sans-serif;
  --sc-font-body: Poppins, "Segoe UI", system-ui, sans-serif;
  --sc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sc-weight-light: 300;
  --sc-weight-regular: 400;
  --sc-weight-medium: 500;
  --sc-weight-semibold: 600;
  --sc-weight-bold: 700;
  --sc-text-xs: 0.75rem;
  --sc-leading-xs: 1.4;
  --sc-text-sm: 0.875rem;
  --sc-leading-sm: 1.5;
  --sc-text-body: 1rem;
  --sc-leading-body: 1.6;
  --sc-text-lg: 1.25rem;
  --sc-leading-lg: 1.5;
  --sc-text-h3: 1.5rem;
  --sc-leading-h3: 1.35;
  --sc-text-h2: 1.75rem;
  --sc-leading-h2: 1.3;
  --sc-text-h1: 2.5rem;
  --sc-leading-h1: 1.2;
  --sc-text-display: 4rem;
  --sc-leading-display: 1.05;
  --sc-label-tracking: 0.35em;
  --sc-section-label-tracking: 0.18em;
  --sc-measure: 68ch;
  --sc-measure-narrow: 52ch;
  --sc-stat-numeral-size: 4.5rem;
  --sc-stat-numeral-on-light: #127CB3;
  --sc-stat-numeral-on-brand: #FFFFFF;

  /* ---- Space, radius, border, shadow, motion (GD-7, NEW-7) ---- */
  --sc-space-0: 0px;
  --sc-space-1: 2px;
  --sc-space-2: 4px;
  --sc-space-3: 8px;
  --sc-space-4: 12px;
  --sc-space-5: 16px;
  --sc-space-6: 24px;
  --sc-space-7: 32px;
  --sc-space-8: 48px;
  --sc-space-9: 64px;
  --sc-space-10: 96px;
  --sc-radius-sm: 6px;
  --sc-radius-md: 12px;
  --sc-radius-lg: 20px;
  --sc-radius-xl: 28px;
  --sc-radius-pill: 200px;
  --sc-radius-full: 9999px;
  --sc-border-hairline: 1px;
  --sc-border-thick: 2px;
  --sc-border-focus-ring: 3px;
  --sc-border-focus-offset: 2px;
  --sc-border-$focus-note: The focus ring is always drawn with focusOffset px of surface-coloured gap, so it is measured against the SURFACE (>=3:1), never against the control fill it surrounds.px;
  --sc-duration-fast: 150ms;
  --sc-duration-base: 250ms;
  --sc-duration-slow: 400ms;
  --sc-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --sc-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --sc-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Dataviz (NEW-2) ---- */
  --sc-viz-cat-1: #149CD8;
  --sc-viz-cat-2: #375786;
  --sc-viz-cat-3: #3FC4D6;
  --sc-viz-cat-4: #F0C24B;
  --sc-viz-cat-5: #E2662A;
  --sc-viz-cat-6: #7E63A8;
  --sc-viz-cat-7: #0F7C88;
  --sc-viz-cat-8: #9AAEC1;
  --sc-viz-seq-1: #D0EBF7;
  --sc-viz-seq-2: #A1D7EF;
  --sc-viz-seq-3: #72C4E8;
  --sc-viz-seq-4: #43B0E0;
  --sc-viz-seq-5: #149CD8;
  --sc-viz-seq-6: #127CB3;
  --sc-viz-seq-7: #0B5C84;
  --sc-viz-div-1: #0B5C84;
  --sc-viz-div-2: #43B0E0;
  --sc-viz-div-3: #A1D7EF;
  --sc-viz-div-4: #F0F6FA;
  --sc-viz-div-5: #F5D99A;
  --sc-viz-div-6: #E2A03C;
  --sc-viz-div-7: #B4560F;
  --sc-viz-highlight: #E20E18;

  /* ---- Map (NEW-3) ---- */
  --sc-map-aoi-stroke: #0F6E9E;
  --sc-map-aoi-stroke-width: 2px;
  --sc-map-aoi-fill: #149CD8;
  --sc-map-aoi-fill-opacity: 0.12;
  --sc-map-aoi-casing: #FFFFFF;
  --sc-map-aoi-casing-width: 4px;
  --sc-map-overlay-opacity: 0.72;
  --sc-map-scan-color: #FFFFFF;
  --sc-map-scan-opacity: 0.35;
  --sc-map-scan-angle: 45deg;
  --sc-map-scan-spacing: 6px;
  --sc-map-scan-width: 1px;
  --sc-map-chip-bg: rgba(255,255,255,0.92);
  --sc-map-chip-radius: 200px;
  --sc-mark-size: 26px;

  /* ---- Semantic layer, light (GD-8). Apps consume THESE. ---- */
  --sc-surface: #FFFFFF;
  --sc-surface-raised: #FFFFFF;
  --sc-surface-sunken: #F0F6FA;
  --sc-surface-inverse: #0B1B2B;
  --sc-text: #141D24;
  --sc-text-muted: #516576;
  --sc-text-subtle: #6E8598;
  --sc-text-on-accent: #FFFFFF;
  --sc-border: #E1EAF2;
  --sc-border-strong: #6E8598;
  --sc-accent: #149CD8;
  --sc-accent-hover: #127CB3;
  --sc-accent-pressed: #0F6E9E;
  --sc-accent-subtle: #D0EBF7;
  --sc-on-accent: #FFFFFF;
  --sc-accent-solid: #127CB3;
  --sc-accent-solid-hover: #0F6E9E;
  --sc-accent-solid-pressed: #0B5C84;
  --sc-on-accent-solid: #FFFFFF;
  --sc-link: #0F6E9E;
  --sc-link-hover: #0B5C84;
  --sc-link-visited: #375786;
  --sc-focus: #0B5C84;
  --sc-shadow-color: rgba(20, 29, 36, 0.14);
  --sc-surface-hover: #F4F8FB;
  --sc-surface-active: #E9F1F7;
  --sc-surface-selected: #E4F1FA;
  --sc-overlay: rgba(11, 27, 43, 0.48);
  --sc-input-background: #FFFFFF;
  --sc-input-border: #7A8FA2;
  --sc-input-border-hover: #9AAEC1;
  --sc-placeholder: #516576;
  --sc-disabled-background: #F0F6FA;
  --sc-disabled-text: #9AAEC1;
  --sc-disabled-border: #E1EAF2;
  --sc-selection-background: #D0EBF7;
  --sc-selection-text: #141D24;
  --sc-code-background: #F0F6FA;
  --sc-code-text: #26333D;
  color-scheme: light;
  --sc-shadow-1: 0 1px 2px rgba(20,29,36,.06), 0 2px 8px rgba(20,29,36,.08);
  --sc-shadow-2: 0 2px 6px rgba(20,29,36,.08), 0 12px 28px rgba(20,29,36,.12);
  --sc-status-good-text: #0D737E;
  --sc-status-good-fill: #3FC4D6;
  --sc-status-good-bg: #E4F6F8;
  --sc-status-moderate-text: #7A5A00;
  --sc-status-moderate-fill: #F0C24B;
  --sc-status-moderate-bg: #FBF1D9;
  --sc-status-poor-text: #A6431A;
  --sc-status-poor-fill: #E2662A;
  --sc-status-poor-bg: #FBEADF;
  --sc-status-alert-text: #8E1420;
  --sc-status-alert-fill: #8E1420;
  --sc-status-alert-bg: #F9E4E6;
  --sc-status-info-text: #0F6E9E;
  --sc-status-info-fill: #149CD8;
  --sc-status-info-bg: #E2F2FB;
  --sc-status-neutral-text: #516576;
  --sc-status-neutral-fill: #9AAEC1;
  --sc-status-neutral-bg: #EEF3F7;
  --sc-viz-cat-1: #149CD8;
  --sc-viz-cat-2: #375786;
  --sc-viz-cat-3: #3FC4D6;
  --sc-viz-cat-4: #F0C24B;
  --sc-viz-cat-5: #E2662A;
  --sc-viz-cat-6: #7E63A8;
  --sc-viz-cat-7: #0F7C88;
  --sc-viz-cat-8: #9AAEC1;
  --sc-viz-axis: #6E8598;
  --sc-viz-gridline: #E1EAF2;
}

/* Dark theme. Three states: system default (media query), explicit [data-theme] wins both ways. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sc-surface: #0B1B2B;
    --sc-surface-raised: #122A40;
    --sc-surface-sunken: #071523;
    --sc-surface-inverse: #FFFFFF;
    --sc-text: #E6EEF5;
    --sc-text-muted: #9FB3C6;
    --sc-text-subtle: #7C93A8;
    --sc-text-on-accent: #04121D;
    --sc-border: #23405A;
    --sc-border-strong: #527A9E;
    --sc-accent: #43B0E0;
    --sc-accent-hover: #72C4E8;
    --sc-accent-pressed: #A1D7EF;
    --sc-accent-subtle: #12354F;
    --sc-on-accent: #04121D;
    --sc-accent-solid: #43B0E0;
    --sc-accent-solid-hover: #72C4E8;
    --sc-accent-solid-pressed: #A1D7EF;
    --sc-on-accent-solid: #04121D;
    --sc-link: #5CB8E8;
    --sc-link-hover: #8FD1F0;
    --sc-link-visited: #A1D7EF;
    --sc-focus: #8FD1F0;
    --sc-shadow-color: rgba(0, 0, 0, 0.45);
    --sc-surface-hover: #16334C;
    --sc-surface-active: #1D3D59;
    --sc-surface-selected: #163A57;
    --sc-overlay: rgba(0, 0, 0, 0.64);
    --sc-input-background: #071523;
    --sc-input-border: #4A7191;
    --sc-input-border-hover: #527A9E;
    --sc-placeholder: #9FB3C6;
    --sc-disabled-background: #0E2233;
    --sc-disabled-text: #55697C;
    --sc-disabled-border: #1E374D;
    --sc-selection-background: #12354F;
    --sc-selection-text: #E6EEF5;
    --sc-code-background: #071523;
    --sc-code-text: #C8D6E3;
    color-scheme: dark;
    --sc-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --sc-shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
    --sc-status-good-text: #5FD6E4;
    --sc-status-good-fill: #3FC4D6;
    --sc-status-good-bg: #0E2E33;
    --sc-status-moderate-text: #F0C24B;
    --sc-status-moderate-fill: #F0C24B;
    --sc-status-moderate-bg: #302810;
    --sc-status-poor-text: #FF8B54;
    --sc-status-poor-fill: #E2662A;
    --sc-status-poor-bg: #33190E;
    --sc-status-alert-text: #FF8A8A;
    --sc-status-alert-fill: #C9313F;
    --sc-status-alert-bg: #331216;
    --sc-status-info-text: #5CB8E8;
    --sc-status-info-fill: #43B0E0;
    --sc-status-info-bg: #12354F;
    --sc-status-neutral-text: #9AAEC1;
    --sc-status-neutral-fill: #6E8598;
    --sc-status-neutral-bg: #1B2833;
    --sc-viz-cat-1: #43B0E0;
    --sc-viz-cat-2: #7E9FD4;
    --sc-viz-cat-3: #3FC4D6;
    --sc-viz-cat-4: #F0C24B;
    --sc-viz-cat-5: #FF8B54;
    --sc-viz-cat-6: #A98FD8;
    --sc-viz-cat-7: #4FBFCB;
    --sc-viz-cat-8: #9AAEC1;
    --sc-viz-axis: #527A9E;
    --sc-viz-gridline: #23405A;
  }
}
[data-theme="dark"] {
  --sc-surface: #0B1B2B;
  --sc-surface-raised: #122A40;
  --sc-surface-sunken: #071523;
  --sc-surface-inverse: #FFFFFF;
  --sc-text: #E6EEF5;
  --sc-text-muted: #9FB3C6;
  --sc-text-subtle: #7C93A8;
  --sc-text-on-accent: #04121D;
  --sc-border: #23405A;
  --sc-border-strong: #527A9E;
  --sc-accent: #43B0E0;
  --sc-accent-hover: #72C4E8;
  --sc-accent-pressed: #A1D7EF;
  --sc-accent-subtle: #12354F;
  --sc-on-accent: #04121D;
  --sc-accent-solid: #43B0E0;
  --sc-accent-solid-hover: #72C4E8;
  --sc-accent-solid-pressed: #A1D7EF;
  --sc-on-accent-solid: #04121D;
  --sc-link: #5CB8E8;
  --sc-link-hover: #8FD1F0;
  --sc-link-visited: #A1D7EF;
  --sc-focus: #8FD1F0;
  --sc-shadow-color: rgba(0, 0, 0, 0.45);
  --sc-surface-hover: #16334C;
  --sc-surface-active: #1D3D59;
  --sc-surface-selected: #163A57;
  --sc-overlay: rgba(0, 0, 0, 0.64);
  --sc-input-background: #071523;
  --sc-input-border: #4A7191;
  --sc-input-border-hover: #527A9E;
  --sc-placeholder: #9FB3C6;
  --sc-disabled-background: #0E2233;
  --sc-disabled-text: #55697C;
  --sc-disabled-border: #1E374D;
  --sc-selection-background: #12354F;
  --sc-selection-text: #E6EEF5;
  --sc-code-background: #071523;
  --sc-code-text: #C8D6E3;
  color-scheme: dark;
  --sc-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --sc-shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
  --sc-status-good-text: #5FD6E4;
  --sc-status-good-fill: #3FC4D6;
  --sc-status-good-bg: #0E2E33;
  --sc-status-moderate-text: #F0C24B;
  --sc-status-moderate-fill: #F0C24B;
  --sc-status-moderate-bg: #302810;
  --sc-status-poor-text: #FF8B54;
  --sc-status-poor-fill: #E2662A;
  --sc-status-poor-bg: #33190E;
  --sc-status-alert-text: #FF8A8A;
  --sc-status-alert-fill: #C9313F;
  --sc-status-alert-bg: #331216;
  --sc-status-info-text: #5CB8E8;
  --sc-status-info-fill: #43B0E0;
  --sc-status-info-bg: #12354F;
  --sc-status-neutral-text: #9AAEC1;
  --sc-status-neutral-fill: #6E8598;
  --sc-status-neutral-bg: #1B2833;
  --sc-viz-cat-1: #43B0E0;
  --sc-viz-cat-2: #7E9FD4;
  --sc-viz-cat-3: #3FC4D6;
  --sc-viz-cat-4: #F0C24B;
  --sc-viz-cat-5: #FF8B54;
  --sc-viz-cat-6: #A98FD8;
  --sc-viz-cat-7: #4FBFCB;
  --sc-viz-cat-8: #9AAEC1;
  --sc-viz-axis: #527A9E;
  --sc-viz-gridline: #23405A;
}

/* Forcing light inside a dark subtree — the mirror case. */
[data-theme="light"] {
  --sc-surface: #FFFFFF;
  --sc-surface-raised: #FFFFFF;
  --sc-surface-sunken: #F0F6FA;
  --sc-surface-inverse: #0B1B2B;
  --sc-text: #141D24;
  --sc-text-muted: #516576;
  --sc-text-subtle: #6E8598;
  --sc-text-on-accent: #FFFFFF;
  --sc-border: #E1EAF2;
  --sc-border-strong: #6E8598;
  --sc-accent: #149CD8;
  --sc-accent-hover: #127CB3;
  --sc-accent-pressed: #0F6E9E;
  --sc-accent-subtle: #D0EBF7;
  --sc-on-accent: #FFFFFF;
  --sc-accent-solid: #127CB3;
  --sc-accent-solid-hover: #0F6E9E;
  --sc-accent-solid-pressed: #0B5C84;
  --sc-on-accent-solid: #FFFFFF;
  --sc-link: #0F6E9E;
  --sc-link-hover: #0B5C84;
  --sc-link-visited: #375786;
  --sc-focus: #0B5C84;
  --sc-shadow-color: rgba(20, 29, 36, 0.14);
  --sc-surface-hover: #F4F8FB;
  --sc-surface-active: #E9F1F7;
  --sc-surface-selected: #E4F1FA;
  --sc-overlay: rgba(11, 27, 43, 0.48);
  --sc-input-background: #FFFFFF;
  --sc-input-border: #7A8FA2;
  --sc-input-border-hover: #9AAEC1;
  --sc-placeholder: #516576;
  --sc-disabled-background: #F0F6FA;
  --sc-disabled-text: #9AAEC1;
  --sc-disabled-border: #E1EAF2;
  --sc-selection-background: #D0EBF7;
  --sc-selection-text: #141D24;
  --sc-code-background: #F0F6FA;
  --sc-code-text: #26333D;
  color-scheme: light;
  --sc-shadow-1: 0 1px 2px rgba(20,29,36,.06), 0 2px 8px rgba(20,29,36,.08);
  --sc-shadow-2: 0 2px 6px rgba(20,29,36,.08), 0 12px 28px rgba(20,29,36,.12);
  --sc-status-good-text: #0D737E;
  --sc-status-good-fill: #3FC4D6;
  --sc-status-good-bg: #E4F6F8;
  --sc-status-moderate-text: #7A5A00;
  --sc-status-moderate-fill: #F0C24B;
  --sc-status-moderate-bg: #FBF1D9;
  --sc-status-poor-text: #A6431A;
  --sc-status-poor-fill: #E2662A;
  --sc-status-poor-bg: #FBEADF;
  --sc-status-alert-text: #8E1420;
  --sc-status-alert-fill: #8E1420;
  --sc-status-alert-bg: #F9E4E6;
  --sc-status-info-text: #0F6E9E;
  --sc-status-info-fill: #149CD8;
  --sc-status-info-bg: #E2F2FB;
  --sc-status-neutral-text: #516576;
  --sc-status-neutral-fill: #9AAEC1;
  --sc-status-neutral-bg: #EEF3F7;
  --sc-viz-cat-1: #149CD8;
  --sc-viz-cat-2: #375786;
  --sc-viz-cat-3: #3FC4D6;
  --sc-viz-cat-4: #F0C24B;
  --sc-viz-cat-5: #E2662A;
  --sc-viz-cat-6: #7E63A8;
  --sc-viz-cat-7: #0F7C88;
  --sc-viz-cat-8: #9AAEC1;
  --sc-viz-axis: #6E8598;
  --sc-viz-gridline: #E1EAF2;
}

/* Reduced motion (NEW-7) */
@media (prefers-reduced-motion: reduce) {
  :root { --sc-duration-fast: 1ms; --sc-duration-base: 1ms; --sc-duration-slow: 1ms; }
}