/*
  styles/tokens.css — díon UI Overhaul design tokens (UIX-01)

  The single source of truth for the warm & clean CHROME design system:
  palette · typography · spacing · roundness · elevation, for light AND dark.

  Load BEFORE styles/stíl.css (tokens.css declares, stíl.css consumes).
  No build step. All tokens are CSS custom properties under the --ui-* prefix.

  Namespace note: --ui-* is DISJOINT from the locked basemap palette. The
  MapLibre GL basemap is themed in JS (DION_THEME / dion-basemap-theme.js) and
  has zero basemap CSS custom properties, so there is no collision. This file
  declares only chrome --ui-* tokens and never recolours a basemap value.

  Dark mode is REAL colour via body.dark-mode (re-points the colour + shadow
  tokens only) — NOT the legacy global-invert hack. Radii, spacing and fonts
  are NOT re-declared in the dark block. (The invert hack itself lives in
  stíl.css and is removed in plan 22-04, which wires the <link> and re-points
  stíl.css onto these tokens.)
*/

/* ── Self-hosted type (no CDN; served same-origin under font-src 'self') ── */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/plus-jakarta-sans-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/inter-600.woff2') format('woff2');
}

/* Bricolage Grotesque — the bold, editorial headline face (27-08 redesign). A variable
   woff2 covering 700–800; latin + latin-ext subsets (latin carries the Irish fadas). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('./fonts/bricolage-grotesque-latin.woff2') format('woff2');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('./fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Light tokens ("Warm & Clean") ── */

:root {
  /* Colour — 60 / 30 / 10 split */
  --ui-bg: #f3f6f1;                    /* page / menu background (60%) */
  --ui-surface: #ffffff;              /* card / sheet surface (60%) */
  --ui-surface-container-high: #e7ece4; /* raised container tint */
  --ui-primary: #4f7d43;             /* warm green — CTA, active, focus (30%) */
  --ui-primary-container: #cde8c1;   /* primary tint container */
  --ui-on-surface: #1b1c1a;          /* body text */
  --ui-on-surface-muted: #434840;    /* disclosures: "≈N m away", "no service" */
  --ui-destructive: #b00020;         /* honest-failure / error only */

  /* Accent — amber, SCORE VALUE ONLY (THEME-03 honesty signature).
     Never spent on a button / chip / link / active state / icon / focus. */
  --ui-score-accent: #e0922e;

  /* Typography — two families, four roles */
  --ui-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ui-font-body: 'Inter', system-ui, sans-serif;
  /* Headline — the bold editorial face for the redesigned place card (27-08). */
  --ui-font-headline: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Display — the 0–10 score value (largest, boldest; amber lives here) */
  --ui-font-size-display: 28px;
  --ui-font-weight-display: 800;
  --ui-line-height-display: 1.15;

  /* Heading — card / sheet titles, mode heading, the díon wordmark */
  --ui-font-size-heading: 20px;
  --ui-font-weight-heading: 700;
  --ui-line-height-heading: 1.2;

  /* Body — default running text, breakdown rows, honest disclosures */
  --ui-font-size-body: 16px;
  --ui-font-weight-body: 400;
  --ui-line-height-body: 1.5;

  /* Label — chips, button labels, menu rows, the /10 denominator */
  --ui-font-size-label: 14px;
  --ui-font-weight-label: 600;
  --ui-line-height-label: 1.4;

  /* Spacing — 4-point scale, leaning roomy (generous whitespace) */
  --ui-space-xs: 4px;
  --ui-space-sm: 8px;
  --ui-space-md: 16px;
  --ui-space-lg: 24px;
  --ui-space-xl: 32px;
  --ui-space-2xl: 48px;
  --ui-space-3xl: 64px;

  /* Roundness — soft, friendly, rounded */
  --ui-radius-sm: 8px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 24px;
  --ui-radius-xl: 32px;
  --ui-radius-pill: 9999px;

  /* Elevation */
  --ui-elev-soft: 0 8px 30px rgba(0, 0, 0, 0.08);
  --ui-elev-sm: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Token Extensions (UIX-06/03 — the ONLY place new tokens may be added).
     All three stay INSIDE the existing palette — no new hue, no new radius /
     space / font token, and never recolour a basemap value (namespace doctrine). */
  --ui-scrim: rgba(15, 21, 15, 0.32);        /* dim layer behind an open mobile sheet — derived from --ui-bg, not a new hue */
  --ui-track: var(--ui-surface-container-high); /* empty portion of a score-bar/slider track — alias the existing container tint (visually identical) */
  --ui-sheet-handle: #cbd3c5;                /* mobile bottom-sheet grab pill — a muted neutral inside the palette */
}

/* ── Dark tokens ("Nocturnal Verdance") ──
   Re-points ONLY colour + shadow. Radii / spacing / fonts inherit from :root.
   Real colour, not inverted colour — no global-invert. */

body.dark-mode {
  --ui-bg: #0f150f;                    /* deepest page background */
  --ui-surface: #1b211b;             /* raised card / sheet (charcoal-green) */
  --ui-surface-container-high: #29332a; /* raised container tint (dark) */
  --ui-primary: #4f7d43;             /* same green holds across light/dark */
  --ui-primary-container: #2c4326;   /* darkened primary tint */
  --ui-on-surface: #eef2ec;          /* light high-contrast neutral */
  --ui-on-surface-muted: #aab4a6;    /* muted light neutral (disclosures) */
  --ui-destructive: #cf5c6b;         /* lightened honest-fail red for dark */

  /* Brighter amber so the score value still pops on charcoal-green */
  --ui-score-accent: #ffb300;

  /* Softened shadow alphas — shadows read less on dark surfaces */
  --ui-elev-soft: 0 8px 30px rgba(0, 0, 0, 0.45);
  --ui-elev-sm: 0 2px 8px rgba(0, 0, 0, 0.35);

  /* Token Extensions — dark re-points (no new hue; inside Nocturnal Verdance). */
  --ui-scrim: rgba(0, 0, 0, 0.5);            /* deeper scrim behind a sheet on the dark page */
  --ui-track: #29332a;                       /* = the dark container tint (matches --ui-surface-container-high) */
  --ui-sheet-handle: #3a463a;                /* muted dark neutral grab pill */
}