/* Design tokens: the only place raw values live. Components use the semantic aliases (--color-*), never the palette names.
   Look: taken from barbour.com (Oct 2026, from the user's screenshots; the site is blocked in the sandbox):
   white ground, neutral grey fills and 1 px rules, one deep forest green, a muted gold for small accents, near-black ink,
   Inter Tight (the system UI font's look, tighter; was the system UI font until 2026-10-04). Scales are standard ones: 4 px spacing, major-third type, 120/200/300 ms motion.
   Light only. See docs/UI_REDESIGN.md §2–3 and ui/styleguide.html. */
/* Inter Tight (OFL, vendor/LICENSE-inter-tight.txt), self-hosted: the system UI look, set tighter so
   labels and pills fit in less width (the user, 2026-10-04: "a more compact font that's similar") */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../vendor/fonts/inter-tight-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../vendor/fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@layer vendor, tokens, base, components, layout, utilities;  /* vendor = MapLibre's CSS */

@layer tokens {
  :root {
    color-scheme: light;

    /* palette (measured from the Barbour screenshots, then checked for WCAG AA) */
    --green-900: #143d1e;   /* the wordmark green: primary actions, selection. White on it 12.2:1 */
    --green-700: #2a5634;   /* hover on green. White on it 8.5:1 */
    --green-100: #e7eee8;   /* selected rows, subtle green fill */
    --gold-600: #7d6a4f;    /* "ESTABLISHED 1894" gold, darkened to pass AA for small text: 5.2:1 on white */
    --gold-200: #e9e2d6;    /* gold tint for highlights */
    --white: #ffffff;       /* ground */
    --grey-50: #f3f3f3;     /* section fills (Barbour's grey panels) */
    --grey-100: #e9e9e9;    /* hover fill, light rule */
    --grey-300: #dbdbdb;    /* 1 px rules */
    --grey-500: #8a8d91;    /* disabled text, strong rules; not for body text (3.3:1) */
    --grey-700: #5c5f63;    /* secondary text: 6.4:1 on white, 5.8:1 on grey-50 */
    --grey-900: #1f2123;    /* ink: 16:1 on white */
    --red-700: #b3261e;     /* errors, destructive: 6.5:1 on white */
    --red-800: #8e2a1f;     /* brick, the hill regions' edge: close buttons, 8.6:1 on white */
    --red-100: #f6e4e1;     /* a brick button's hover */
    --red-600: #c8261b;     /* close buttons: a clear red (the user, 2026-10-07: "not visible enough"), 5.6:1 on white, 4.6:1 on red-50 */
    --red-50: #fbe3df;      /* a close button's resting fill */

    /* semantic aliases: components use only these */
    --color-surface: var(--white);
    --color-surface-alt: var(--grey-50);
    --color-surface-hover: var(--grey-100);
    --color-surface-selected: var(--green-100);
    --color-text: var(--grey-900);
    --color-text-muted: var(--grey-700);
    --color-text-disabled: var(--grey-500);
    --color-text-inverse: var(--white);
    --color-border: var(--grey-300);
    --color-border-strong: var(--grey-900);
    --color-action: var(--green-900);
    --color-action-hover: var(--green-700);
    --color-action-text: var(--white);
    --color-accent: var(--gold-600);          /* small labels and the tagline, sparingly */
    --color-accent-tint: var(--gold-200);
    --color-focus: var(--green-900);
    --color-danger: var(--red-700);
    --color-close: var(--red-800);            /* brick: Clear / Delete in the editors, the train warning */
    --color-close-hover: var(--red-100);
    --color-close-button: var(--red-600);     /* every close (×) button */
    --color-close-button-fill: var(--red-50);
    --color-success: var(--green-900);
    --color-scrim: rgb(31 33 35 / 0.4);

    /* grade scale: data, not decoration. Hue order as Climbfinder/Strava; lightness steps keep adjacent steps apart
       under deuteranopia and protanopia (ΔE ≥ 23, checked with the Machado 2009 simulation) */
    --grade-0: #4caf5e;     /* < 3 %   */
    --grade-1: #f5d257;     /* 3–6 %   */
    --grade-2: #e26a12;     /* 6–9 %   */
    --grade-3: #c9302a;     /* 9–12 %  */
    --grade-4: #6e1130;     /* 12–15 % */
    --grade-5: #2b0a16;     /* ≥ 15 %: the Koppenberg and Paterberg ramps (profiles only) */
    --grade-down: #c3c8c2;  /* descending */
    /* altitude scale (the climbs zoomed out, the user 2026-10-06): the warm end of the grade colours, blended by
       height above sea level; low ground yellow, the highest tops deep red */
    --alt-0: var(--grade-1);  /* 0 m   */
    --alt-1: var(--grade-2);  /* 40 m  */
    --alt-2: var(--grade-3);  /* 90 m  */
    --alt-3: var(--grade-4);  /* 140 m and up */
    /* text on a grade fill (pins, legend): ink on 0–2, white on 3–4, every pair ≥ 4.8:1 */
    --grade-0-text: var(--grey-900);
    --grade-1-text: var(--grey-900);
    --grade-2-text: var(--grey-900);
    --grade-3-text: var(--white);
    --grade-4-text: var(--white);
    --grade-5-text: var(--white);

    /* type: Inter Tight. Roughly a major-third scale from 15 px, one notch smaller than the first cut (the user, 2026-10-04: "shrink the UI a tiny bit everywhere") */
    --font-sans: "Inter Tight", ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-size-xs: 0.71875rem; /* 11.5 labels, captions */
    --font-size-sm: 0.84375rem; /* 13.5 secondary text, controls S */
    --font-size-md: 0.9375rem;  /* 15 body, controls M */
    --font-size-lg: 1.125rem;   /* 18 panel titles */
    --font-size-xl: 1.375rem;   /* 22 climb title */
    --font-size-2xl: 1.75rem;   /* 28 big stats */
    --font-size-3xl: 2.4375rem; /* 39 display */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --line-height-body: 1.45;
    --line-height-display: 1.15;
    --letter-spacing-label: 0.1em;  /* uppercase small labels only */

    /* spacing: 4 px base */
    --space-1: 4px;
    --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;

    /* sizes */
    --control-height-m: 36px;
    --control-height-s: 30px;
    --touch-target: 40px;
    --icon-size: 20px;
    --icon-size-s: 16px;
    --border-width: 1px;
    --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);

    /* radius: square-ish, like the source */
    --radius-control: 2px;
    --radius-card: 4px;
    --radius-pill: 999px;

    /* elevation: three soft, neutral shadows */
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08);
    --shadow-overlay: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.06);
    --shadow-modal: 0 12px 32px rgb(0 0 0 / 0.14), 0 4px 8px rgb(0 0 0 / 0.06);

    /* z-index layers */
    --z-map: 0;
    --z-map-chrome: 10;
    --z-panel: 20;
    --z-drawer: 30;
    --z-sheet: 40;
    --z-popover: 50;
    --z-toast: 60;
    --z-modal: 70;

    /* motion */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --easing: cubic-bezier(.2, .8, .2, 1);
    /* the side panel growing / shrinking with the view: eased at both ends (300 ms was too snappy, 600 ms too sluggish) */
    --duration-panel: 450ms;
    --easing-panel: cubic-bezier(.65, 0, .35, 1); /* ease-in-out cubic: slow, fast, slow (the user's sketch) */

    /* layout (breakpoints can't be variables in @media; they are: phone < 640, tablet 640–1023, desktop ≥ 1024) */
    --panel-width-min: 360px;  /* the widest control row (Balanced | Quiet | Hilly + More) never clips */
    --panel-width-default: 400px;
    --rail-width: 48px;
  }

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