/* ALTO design tokens v1.0.0 (2026-10-11). Generated by tools/build_tokens.py from the tables in that file.
   Load this file before any other stylesheet. Light theme first; dark theme follows the OS unless
   <html data-theme="light|dark"> is set. Do not edit by hand. */

/* Typeface: self-host Inter 4 (OFL) as "ALTO Inter". Uncomment once fonts/ is deployed beside this file.
@font-face { font-family: "ALTO Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable.woff2") format("woff2"); }
@font-face { font-family: "ALTO Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable-Italic.woff2") format("woff2"); }
*/

:root {
  color-scheme: light;

  /* Primitive colours */
  --alto-green-50: #f2f6f0;
  --alto-green-100: #e4ede0;
  --alto-green-200: #cbdcc4;
  --alto-green-300: #a7c0a2;
  --alto-green-400: #769770;
  --alto-green-500: #4a6f46;
  --alto-green-600: #3e5f3b;
  --alto-green-700: #2f4a2d;
  --alto-green-800: #1f341e;
  --alto-green-900: #122112;
  --neutral-0: #ffffff;
  --neutral-50: #f7f8f5;
  --neutral-100: #e9ede7;
  --neutral-200: #d8ddd6;
  --neutral-300: #b9c0ba;
  --neutral-400: #8a938d;
  --neutral-500: #727c75;
  --neutral-600: #5b655f;
  --neutral-700: #45504a;
  --neutral-800: #33403a;
  --neutral-900: #17201a;
  --neutral-950: #0f1411;
  --night-bg: #0f1411;
  --night-surface: #161d18;
  --night-raised: #1c251f;
  --night-sunken: #121814;
  --night-tint: #1b261d;
  --night-tint-hover: #223024;
  --night-border-subtle: #232c27;
  --night-border: #2c3833;
  --night-border-strong: #3b4842;
  --night-border-input: #5f6b63;
  --night-faint: #7d8a80;
  --night-muted: #a2afa5;
  --night-secondary: #c9d3cb;
  --night-text: #e8eee9;
  --magenta-50: #f8e7ef;
  --magenta-600: #b02e6f;
  --magenta-700: #8f2459;
  --magenta-night-text: #e88ab8;
  --magenta-night-bg: #2e1824;
  --bpl-navy: #0c0c48;
  --bpl-grey: #aeaeae;

  /* Semantic colour roles */
  --color-bg: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-raised: var(--neutral-0);
  --color-surface-sunken: var(--neutral-100);
  --color-surface-tint: var(--alto-green-50);
  --color-surface-tint-hover: var(--alto-green-100);
  --color-surface-inverse: var(--neutral-900);
  --color-scrim: rgb(15 20 17 / 45%);
  --color-text: var(--neutral-900);
  --color-text-secondary: var(--neutral-800);
  --color-text-muted: var(--neutral-600);
  --color-text-disabled: var(--neutral-500);
  --color-text-inverse: var(--neutral-0);
  --color-text-link: var(--alto-green-600);
  --color-text-accent: var(--alto-green-700);
  --color-border-subtle: var(--neutral-100);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-input: var(--neutral-400);
  --color-accent: var(--alto-green-500);
  --color-accent-hover: var(--alto-green-600);
  --color-accent-active: var(--alto-green-700);
  --color-on-accent: var(--neutral-0);
  --color-focus: var(--alto-green-500);
  --color-selection: var(--neutral-900);
  --color-selection-halo: var(--neutral-0);
  --color-app-bar-bg: var(--neutral-0);
  --color-app-bar-fg: var(--neutral-900);
  --color-protected: var(--magenta-600);
  --color-protected-fill: var(--magenta-600);
  --color-protected-bg: var(--magenta-50);
  --color-estimate: var(--neutral-600);
  --color-estimate-border: var(--neutral-400);
  --color-positive: #2c6b34;
  --color-positive-bg: #e6f2e4;
  --color-positive-border: #b9d8b6;
  --color-warning: #7a4b12;
  --color-warning-bg: #fbf3e6;
  --color-warning-border: #ecd3a6;
  --color-warning-mark: #b57918;
  --color-critical: #a42c28;
  --color-critical-bg: #fbe9e7;
  --color-critical-border: #f0b7b0;
  --color-info: #24527f;
  --color-info-bg: #e8f0f8;
  --color-info-border: #b6cde6;

  /* Data visualisation */
  --viz-cat-1: #3ca17b;
  --viz-cat-2: #16558c;
  --viz-cat-3: #ba7f14;
  --viz-cat-4: #9e6ec0;
  --viz-cat-5: #a74639;
  --viz-cat-6: #1d97a3;
  --viz-cat-7: #bc662f;
  --viz-other: var(--neutral-400);
  --viz-src-council-parks: var(--viz-cat-1);
  --viz-src-auckland-transport: var(--viz-cat-2);
  --viz-src-community: var(--viz-cat-3);
  --viz-src-lidar-detected: var(--viz-cat-4);
  --viz-src-notable-schedule: var(--viz-cat-5);
  --viz-src-other: var(--viz-other);
  --viz-form-evergreen-broadleaf: var(--viz-cat-1);
  --viz-form-conifer: var(--viz-cat-2);
  --viz-form-deciduous-broadleaf: var(--viz-cat-3);
  --viz-form-palm-fern: var(--viz-cat-4);
  --viz-form-broadleaf-undetermined: var(--viz-seq-300);   /* not slot 5 brick beside slot 1 green: the red-green rule */
  --viz-form-not-estimated: var(--viz-other);
  --viz-land-street: var(--viz-cat-2);
  --viz-land-park: var(--viz-cat-1);
  --viz-land-institution: var(--viz-cat-3);
  --viz-land-private: var(--viz-cat-4);
  --viz-land-other: var(--viz-other);
  --viz-seq-100: #dff7eb;
  --viz-seq-200: #bbe9d3;
  --viz-seq-300: #94d7b9;
  --viz-seq-400: #6ac19d;
  --viz-seq-500: #45a983;
  --viz-seq-600: #27906b;
  --viz-seq-700: #147656;
  --viz-seq-800: #0c5d43;
  --viz-seq-900: #044430;
  --viz-div-loss-3: #8b3906;
  --viz-div-loss-2: #b55422;
  --viz-div-loss-1: #d57f57;
  --viz-div-mid: #e3e7e1;
  --viz-div-gain-1: #49a8b3;
  --viz-div-gain-2: #04848f;
  --viz-div-gain-3: #076169;
  --viz-conf-4: #194f81;
  --viz-conf-3: #346ca3;
  --viz-conf-2: #588abd;
  --viz-conf-1: #81a9d2;
  --viz-conf-none: var(--neutral-400);
  --viz-overlay-focus: #ffe14d;
  --viz-overlay-alt: #2fd6ff;
  --viz-overlay-third: #ff75c3;
  --viz-overlay-context: rgb(255 255 255 / 80%);
  --viz-overlay-position: #ff9a3c;
  --viz-overlay-halo: rgb(0 0 0 / 55%);
  --viz-grid: var(--neutral-100);
  --viz-axis: var(--neutral-300);
  --viz-label: var(--neutral-600);
  --viz-value: var(--neutral-900);
  --viz-reference: var(--neutral-600);
  --viz-bark: #8a6a4a;
  --viz-mark-stroke: rgb(23 32 26 / 55%);
  --viz-mark-stroke-imagery: #ffffff;

  /* Typography */
  --font-sans: "ALTO Inter", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;
  --ls-caps: 0.06em;
  --ls-tight: -0.015em;
  --ls-display: -0.025em;
  --ls-normal: 0;
  --text-display: 700 var(--fs-4xl)/var(--lh-tight) var(--font-sans);
  --text-h1: 700 var(--fs-3xl)/var(--lh-tight) var(--font-sans);
  --text-h2: 700 var(--fs-xl)/var(--lh-snug) var(--font-sans);
  --text-title-panel: 700 var(--fs-2xl)/var(--lh-tight) var(--font-sans);
  --text-h3: 600 var(--fs-lg)/var(--lh-snug) var(--font-sans);
  --text-body: 400 var(--fs-lg)/var(--lh-relaxed) var(--font-sans);
  --text-body-ui: 400 var(--fs-md)/var(--lh-normal) var(--font-sans);
  --text-label: 400 var(--fs-sm)/var(--lh-snug) var(--font-sans);
  --text-value: 600 var(--fs-md)/var(--lh-snug) var(--font-sans);
  --text-value-lg: 700 var(--fs-xl)/var(--lh-tight) var(--font-sans);
  --text-caption: 400 var(--fs-xs)/var(--lh-normal) var(--font-sans);
  --text-eyebrow: 600 var(--fs-2xs)/var(--lh-snug) var(--font-sans);
  --text-mono: 400 var(--fs-xs)/var(--lh-normal) var(--font-mono);
  --numeric-data: tabular-nums;  /* font-variant-numeric for tables, data rows, legends, axes */

  /* Spacing (4px base) */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Elevation */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgb(23 32 26 / 6%), 0 4px 16px rgb(23 32 26 / 7%);
  --shadow-2: 0 2px 6px rgb(23 32 26 / 8%), 0 16px 40px rgb(23 32 26 / 14%);
  --shadow-3: 0 8px 24px rgb(23 32 26 / 16%), 0 32px 72px rgb(23 32 26 / 24%);
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-map: 700ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Layers */
  --z-base: 0;
  --z-map-ui: 10;
  --z-panel: 20;
  --z-sheet: 30;
  --z-popover: 40;
  --z-toast: 50;
  --z-dialog: 60;
  --z-skip-link: 70;

  /* Sizes */
  --control-xs: 28px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --target-min: 24px;
  --target-touch: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --swatch: 10px;
  --panel-inset: 12px;
  --panel-explorer-w: 320px;
  --panel-tree-w: 400px;
  --sheet-peek: 168px;
  --app-bar-h: 56px;
  --page-max: 1200px;
  --prose-max: 68ch;
  /* Breakpoints (media queries cannot read custom properties; use these literal values): sm 600px, md 760px, lg 1100px, xl 1440px */

  /* Legacy aliases: ALTO tool v0.1/v0.2 variable names. Remove each once no stylesheet uses it. */
  --ink: var(--color-text);
  --ink-2: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --faint: var(--color-border-input);
  --line: var(--color-border);
  --line-soft: var(--color-border-subtle);
  --surface: var(--color-bg);
  --panel: var(--color-surface);
  --card: var(--color-surface);
  --card-2: var(--color-bg);
  --accent: var(--color-accent);
  --alto-green: var(--alto-green-500);
  --protected: var(--color-protected);
  --warn-bg: var(--color-warning-bg);
  --warn-ink: var(--color-warning);
  --review: var(--color-warning-mark);
  --unlinked: var(--viz-conf-none);
  --no-crown: var(--viz-conf-none);
  --road: var(--viz-src-auckland-transport);
  --park: var(--viz-src-council-parks);
  --inferred: var(--viz-src-lidar-detected);
  --low-canopy: var(--viz-cat-6);
  --unknown: var(--viz-other);
  --water: var(--viz-cat-2);
  --carbon: var(--viz-cat-1);
  --air: var(--viz-cat-4);
  --cool: var(--viz-cat-7);
  --viz-crown: var(--viz-seq-400);
  --viz-crown-line: var(--viz-seq-700);
  --viz-trunk: var(--viz-bark);
  --viz-ref: var(--viz-reference);
  --viz-house: var(--neutral-200);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --ease: var(--ease-standard);
  --font: var(--font-sans);
}

/* Dark theme: follows the OS unless the page opts out with data-theme="light". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--night-bg);
    --color-surface: var(--night-surface);
    --color-surface-raised: var(--night-raised);
    --color-surface-sunken: var(--night-sunken);
    --color-surface-tint: var(--night-tint);
    --color-surface-tint-hover: var(--night-tint-hover);
    --color-surface-inverse: var(--night-text);
    --color-scrim: rgb(0 0 0 / 60%);
    --color-text: var(--night-text);
    --color-text-secondary: var(--night-secondary);
    --color-text-muted: var(--night-muted);
    --color-text-disabled: var(--night-faint);
    --color-text-inverse: var(--neutral-900);
    --color-text-link: #84b37f;
    --color-text-accent: #a1cb9c;
    --color-border-subtle: var(--night-border-subtle);
    --color-border: var(--night-border);
    --color-border-strong: var(--night-border-strong);
    --color-border-input: var(--night-border-input);
    --color-accent: #84b37f;
    --color-accent-hover: #a1cb9c;
    --color-accent-active: #b9d8b4;
    --color-on-accent: #0f1a12;
    --color-focus: #a1cb9c;
    --color-selection: var(--neutral-0);
    --color-selection-halo: var(--neutral-900);
    --color-app-bar-bg: var(--night-surface);
    --color-app-bar-fg: var(--night-text);
    --color-protected: var(--magenta-night-text);
    --color-protected-bg: var(--magenta-night-bg);
    --color-estimate: var(--night-muted);
    --color-estimate-border: var(--night-faint);
    --color-positive: #86c98f;
    --color-positive-bg: #17281b;
    --color-positive-border: #2c4a31;
    --color-warning: #e6b766;
    --color-warning-bg: #2b2414;
    --color-warning-border: #4d3d1c;
    --color-warning-mark: #e0a33c;
    --color-critical: #f08a80;
    --color-critical-bg: #2e1a18;
    --color-critical-border: #5a2c28;
    --color-info: #8fb8e6;
    --color-info-bg: #172433;
    --color-info-border: #2b4260;
    --viz-cat-1: #23ac74;
    --viz-cat-2: #419bd4;
    --viz-cat-3: #c8800d;
    --viz-cat-4: #7f51c1;
    --viz-cat-5: #a94f4a;
    --viz-cat-6: #13a5b2;
    --viz-cat-7: #b95115;
    --viz-other: var(--night-faint);
    --viz-div-loss-3: #e5b099;
    --viz-div-loss-2: #d57f57;
    --viz-div-loss-1: #b55422;
    --viz-div-mid: #2c3330;
    --viz-div-gain-1: #04848f;
    --viz-div-gain-2: #49a8b3;
    --viz-div-gain-3: #90c9d0;
    --viz-conf-4: #81a9d2;
    --viz-conf-3: #588abd;
    --viz-conf-2: #346ca3;
    --viz-conf-1: #194f81;
    --viz-conf-none: var(--night-faint);
    --viz-grid: var(--night-border-subtle);
    --viz-axis: var(--night-border-strong);
    --viz-label: var(--night-muted);
    --viz-value: var(--night-text);
    --viz-reference: var(--night-muted);
    --viz-bark: #b39070;
    --viz-mark-stroke: rgb(0 0 0 / 60%);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 35%);
    --shadow-2: 0 2px 8px rgb(0 0 0 / 45%), 0 16px 40px rgb(0 0 0 / 45%);
    --shadow-3: 0 8px 24px rgb(0 0 0 / 55%), 0 32px 72px rgb(0 0 0 / 60%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--night-bg);
  --color-surface: var(--night-surface);
  --color-surface-raised: var(--night-raised);
  --color-surface-sunken: var(--night-sunken);
  --color-surface-tint: var(--night-tint);
  --color-surface-tint-hover: var(--night-tint-hover);
  --color-surface-inverse: var(--night-text);
  --color-scrim: rgb(0 0 0 / 60%);
  --color-text: var(--night-text);
  --color-text-secondary: var(--night-secondary);
  --color-text-muted: var(--night-muted);
  --color-text-disabled: var(--night-faint);
  --color-text-inverse: var(--neutral-900);
  --color-text-link: #84b37f;
  --color-text-accent: #a1cb9c;
  --color-border-subtle: var(--night-border-subtle);
  --color-border: var(--night-border);
  --color-border-strong: var(--night-border-strong);
  --color-border-input: var(--night-border-input);
  --color-accent: #84b37f;
  --color-accent-hover: #a1cb9c;
  --color-accent-active: #b9d8b4;
  --color-on-accent: #0f1a12;
  --color-focus: #a1cb9c;
  --color-selection: var(--neutral-0);
  --color-selection-halo: var(--neutral-900);
  --color-app-bar-bg: var(--night-surface);
  --color-app-bar-fg: var(--night-text);
  --color-protected: var(--magenta-night-text);
  --color-protected-bg: var(--magenta-night-bg);
  --color-estimate: var(--night-muted);
  --color-estimate-border: var(--night-faint);
  --color-positive: #86c98f;
  --color-positive-bg: #17281b;
  --color-positive-border: #2c4a31;
  --color-warning: #e6b766;
  --color-warning-bg: #2b2414;
  --color-warning-border: #4d3d1c;
  --color-warning-mark: #e0a33c;
  --color-critical: #f08a80;
  --color-critical-bg: #2e1a18;
  --color-critical-border: #5a2c28;
  --color-info: #8fb8e6;
  --color-info-bg: #172433;
  --color-info-border: #2b4260;
  --viz-cat-1: #23ac74;
  --viz-cat-2: #419bd4;
  --viz-cat-3: #c8800d;
  --viz-cat-4: #7f51c1;
  --viz-cat-5: #a94f4a;
  --viz-cat-6: #13a5b2;
  --viz-cat-7: #b95115;
  --viz-other: var(--night-faint);
  --viz-div-loss-3: #e5b099;
  --viz-div-loss-2: #d57f57;
  --viz-div-loss-1: #b55422;
  --viz-div-mid: #2c3330;
  --viz-div-gain-1: #04848f;
  --viz-div-gain-2: #49a8b3;
  --viz-div-gain-3: #90c9d0;
  --viz-conf-4: #81a9d2;
  --viz-conf-3: #588abd;
  --viz-conf-2: #346ca3;
  --viz-conf-1: #194f81;
  --viz-conf-none: var(--night-faint);
  --viz-grid: var(--night-border-subtle);
  --viz-axis: var(--night-border-strong);
  --viz-label: var(--night-muted);
  --viz-value: var(--night-text);
  --viz-reference: var(--night-muted);
  --viz-bark: #b39070;
  --viz-mark-stroke: rgb(0 0 0 / 60%);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 35%);
  --shadow-2: 0 2px 8px rgb(0 0 0 / 45%), 0 16px 40px rgb(0 0 0 / 45%);
  --shadow-3: 0 8px 24px rgb(0 0 0 / 55%), 0 32px 72px rgb(0 0 0 / 60%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-map: 0ms; }
}

@media print {
  :root { --shadow-1: none; --shadow-2: none; --shadow-3: none; --color-bg: #ffffff; }
}