/* GENERATED by infra/local/keycloak/theme/build_tokens.py from apps/planet-web/app/tokens.css. */
@font-face { font-family: "Pluto Sans DPD"; src: url("PlutoSansDPD-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pluto Sans DPD"; src: url("PlutoSansDPD-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  /* colour (light): semantic roles; components read these names, never a hex value */
  --canvas: #f6f5f2; /* page background behind cards and panels; carries no text other than headings and meta (T-019) */
  --bg: #ffffff; /* planes: cards, controls, sheets, dialog; the opaque fallback of glass */
  --surface: #f0efec; /* panels, wells, table head, the header strip, the segmented-control track */
  --ink: #1a191c; /* body text, headings */
  --ink-muted: #57555a; /* labels, hints, meta, the correlation id, the neutral accent */
  --ink-on-action: #ffffff; /* the label on the red fill (primary button, skip link) and on the red route card */
  --action: #dc0032; /* the primary FILL, the 'you are here' marker, the done part of the road, the selected-nav dot; never text (T-019: text moved to action-ink) */
  --action-ink: #bb0033; /* red TEXT: links, eyebrows, the selected tab label, red on tints (T-019) */
  --action-hover: #bb0033; /* primary fill on pointer hover (T-019) */
  --action-pressed: #8f0027; /* primary fill while pressed (T-019) */
  --surface-action: #fdeef1; /* red tint: the selected tree/list row (T-019) */
  --focus: #1b2f57; /* the focus ring, and nothing else: navy in light, white in dark, never red */
  --focus-on-strong: #ffffff; /* the focus ring on the sidebar and on the red route card (T-019) */
  --focus-gap: #ffffff; /* the 2 px band on both sides of the ring around a selectable route pin (T-019) */
  --border: #e3e1dc; /* DECORATIVE SEPARATORS ONLY: below 3:1, never a control boundary */
  --border-strong: #87847f; /* group outlines, the edge of a clickable card, open and locked stop rings */
  --border-control: #7c7975; /* every control boundary, including on the canvas, on --surface and inside a tint */
  --success: #0d6b3f; /* the success state word, track and accent */
  --danger: #9e2a14; /* the error state word, track, accent and field error: a crimson-brick kept apart from DPD red */
  --warning: #8a4b00; /* the warning state word AND rework (changes requested): amber, never red */
  --info: #1f4f8f; /* the loading, in-review, changed-since and empty state word, track and accent */
  --warning-accent: #b26a00; /* amber GRAPHIC (rework pin ring, rework outline), never text (T-019) */
  --surface-success: #e7f3ec; /* success banner and chip fill */
  --surface-danger: #fbede8; /* error banner and chip fill */
  --surface-warning: #fff1dc; /* warning banner and chip fill */
  --surface-info: #eaf0f9; /* info banner and chip fill */
  --disabled-ink: #57555a; /* label of a disabled control (alias of ink-muted, so a theme can separate them) */
  --disabled-surface: #eceae6; /* fill of a disabled control, drawn with a dashed border-control edge */
  --chrome: #2e2d30; /* the floating sidebar (T-019) */
  --chrome-ink: #ffffff; /* nav text and icons on the sidebar (T-019) */
  --chrome-ink-muted: #c9c7cc; /* nav group labels, the sidebar foot (T-019) */
  --chrome-selected: #ffffff; /* the selected-nav pill (T-019) */
  --chrome-selected-ink: #1a191c; /* label of the selected-nav pill (T-019) */
  --brand-surface: #dc0032; /* the red route card: flat base (T-019) */
  --brand-surface-hot: #e4003a; /* the red route card: the one highlight, top left (T-019) */
  --brand-surface-deep: #a8002d; /* the red route card: the one depth, bottom right (T-019) */
  --road: #3a393d; /* asphalt of the Route (decorative) (T-019) */
  --road-edge: #d9d5cf; /* road shoulder (decorative) (T-019) */
  --pin-halo: #ffffff; /* 2 px halo that separates every stop pin and marker from the road (T-019) */
  --pin-ink: #1a191c; /* the icon and number on a white pin of the red route card: dark in BOTH modes, because pin-halo stays light in both (T-019, part 2) */
  --marker: #1f4f8f; /* module marker (sign) fill (T-019) */
  --marker-ink: #ffffff; /* module marker label and its 2 px edge (T-019) */
  --van-body: #ffffff; /* DECORATIVE: the delivery van's body (aria-hidden, carries no state) (T-019) */
  --van-cab: #424143; /* DECORATIVE: the van's cab window (T-019) */
  --van-band: #dc0032; /* DECORATIVE: the van's red band (T-019) */
  --van-wheel: #1a191c; /* DECORATIVE: the van's tyres (T-019) */
  --van-hub: #a9a5a0; /* DECORATIVE: the van's hubs (T-019) */
  --plate-edge: #2e2d30; /* T-025 W1a (CR-2): the 1 px edge of the floating sidebar plate. Light: the plate itself (no visible edge, the plate is already dark on the canvas); dark: a lighter rim so the plate reads against the canvas (>= 1.3:1, contrast pairs 109-110) */
  --card-edge: #e3e1dc; /* T-025 W1a (CR-2): the 1 px edge of a card. Light: the decorative separator; dark: night-700 so a card reads against the canvas (>= 1.3:1, pair 110) */
  --hero-surface: #424143; /* T-025 School (Leonardo 2026-10-02: red the main colour, DPD grey the secondary): the asphalt of the road on the red home hero and the fill of a done stop (its white check on it) */
  --hero-node: #57555a; /* T-025 School: the fill of an open stop (and the finish) on the hero road, its number white */
  --hero-node-ring: #a9a5a0; /* T-025 School: the ring of an open stop and the dashed ring of the finish on the hero road (decorative; the stop's words carry its state) */
  --hero-now-ink: #bb0033; /* T-025 School: the red number of the stop she is at, on its white node (pin-halo), in both modes */
  /* material and elevation (light) */
  --glass: rgba(255,255,255,0.84);
  --glass-strong: rgba(255,255,255,0.92);
  --edge: rgba(26,25,28,0.06);
  --glass-control: rgba(255,255,255,0.68);
  --glass-blur: blur(24px) saturate(1.8);
  --road-lane: rgba(255,255,255,0.55);
  --road-on-brand: rgba(60,0,15,0.38);
  --road-edge-on-brand: rgba(255,255,255,0.14);
  --scrim: rgba(26,25,28,0.45);
  --hover-tint: rgba(26,25,28,0.06);
  --surface-tint: #E3E2E0;
  --glass-tint: rgba(239,239,239,0.85);
  --chrome-hover: rgba(255,255,255,0.10);
  --pin-shadow: rgba(0,0,0,0.35);
  --elevation-1: 0 1px 2px rgba(26,25,28,0.06);
  --elevation-2: 0 1px 2px rgba(26,25,28,0.06), 0 8px 24px -12px rgba(26,25,28,0.18);
  --elevation-3: 0 0 0 1px rgba(26,25,28,0.06), 0 28px 64px -20px rgba(26,25,28,0.26);
  /* illustrations (light): decorative scenes, one file per mode */
  --glass-filter: blur(20px) saturate(1.6);
  --glass-strong-filter: blur(28px) saturate(1.6);

  /* type: rem only, so the user's own text size scales everything (SCH-06) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-reading: 1.125rem;
  --text-xxl: 2rem;
  --text-xxxl: 2.75rem;
  --text-numeral: 4rem;
  --text-secondary: 0.9375rem;
  --text-body: 1.0625rem;
  --text-title: 1.375rem;
  --text-display: 2.125rem;
  --leading-xs: 1.5;
  --leading-sm: 1.5;
  --leading-md: 1.5;
  --leading-lg: 1.4;
  --leading-xl: 1.3;
  --leading-reading: 1.55;
  --leading-xxl: 1.1;
  --leading-xxxl: 1.05;
  --leading-numeral: 0.9;
  --leading-secondary: 1.35;
  --leading-body: 1.3;
  --leading-title: 1.25;
  --leading-display: 1.2;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-strong: 400;
  --weight-heavy: 400;
  --tracking-caps: 0.04em;
  --tracking-display: -0.035em;
  --tracking-tight: -0.02em;
  --font: "Pluto Sans DPD", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-synthesis: none;

  /* space: a 4 px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* shape, borders, focus, targets */
  --radius: 12px;
  --radius-focus: 2px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-invalid: 2px;
  --accent-width: 6px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --target-min: 48px;
  --target-floor: 44px;
  --target-school-primary: 56px;
  --check-size: 24px;

  /* layout */
  --content-max: 44rem;
  --page-max: 74rem;
  --term-max: 12rem;
  --listbox-max: 20rem;
  --sidebar-width: 17rem;
  --z-skip-link: 60;
  --z-topbar: 30;
  --z-sidebar: 35;
  --z-sheet: 50;

  /* motion: only transform and opacity move; nothing loops */
  --motion-duration: 160ms;
  --duration-press: 120ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-sheet: 420ms;
  --duration-route-drive: 1400ms;
  --easing-out: cubic-bezier(0.23, 1, 0.32, 1);
  --easing-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --press-scale: 0.98;

  /* illustration aspect ratios (the light file's viewBox); the scenes themselves are per mode, above */

  /* the Route's geometry (px), shared with DPD School */
  --route-road: 34px;
  --route-road-edge: 10px;
  --route-lane: 2.5px;
  --route-done: 8px;
  --route-pin: 42px;
  --route-pin-small: 30px;
  --route-pin-ring: 3px;
  --route-halo: 2px;
  --route-focus-gap: 2px;
  --route-marker-height: 24px;
  --route-hit: 48px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* colour (dark): semantic roles; components read these names, never a hex value */
    --canvas: #141316; /* dark: page background */
    --bg: #1d1c20; /* dark: planes */
    --surface: #26252a; /* dark: panels, wells */
    --ink: #f4f3f1; /* dark: body text */
    --ink-muted: #b9b6bd; /* dark: meta */
    --ink-on-action: #ffffff; /* dark: label on the red fill */
    --action: #e4003a; /* dark: #E4003A, because #DC0032 falls below 3:1 on the dark panel (2.96) */
    --action-ink: #ff6b86; /* dark: red text */
    --action-hover: #e4003a; /* dark: the resting red — hover is shown by elevation-2 (every darker red loses 3:1, every lighter red drops the white label below 4.5) */
    --action-pressed: #e4003a; /* dark: the resting red — pressed is shown by the press scale, which reduced motion removes */
    --surface-action: #3a1119; /* dark: red tint */
    --focus: #ffffff; /* dark: the focus ring is white */
    --focus-on-strong: #ffffff; /* dark: ring on the sidebar and the red card */
    --focus-gap: #141316; /* dark: the band around the ring on a route pin */
    --border: #33323a; /* dark: decorative separators only */
    --border-strong: #8c8992; /* dark: group outlines */
    --border-control: #918e98; /* dark: every control boundary */
    --success: #6fd49f; /* dark: success word */
    --danger: #ff9068; /* dark: error word */
    --warning: #f5b764; /* dark: warning and rework word */
    --info: #9cc2ff; /* dark: info word */
    --warning-accent: #e0a04a; /* dark: amber graphic */
    --surface-success: #0e2418; /* dark: success tint */
    --surface-danger: #2d1410; /* dark: error tint */
    --surface-warning: #2a1f0b; /* dark: warning tint */
    --surface-info: #111c33; /* dark: info tint */
    --disabled-ink: #b9b6bd; /* dark: disabled label */
    --disabled-surface: #2a292e; /* dark: disabled fill */
    --chrome: #0e0d10; /* dark: the floating sidebar */
    --chrome-ink: #f4f3f1; /* dark: nav text */
    --chrome-ink-muted: #c9c7cc; /* dark: nav group labels */
    --chrome-selected: #f4f3f1; /* dark: the selected-nav pill */
    --chrome-selected-ink: #1a191c; /* dark: its label */
    --brand-surface: #ae1437; /* dark: the red route card base */
    --brand-surface-hot: #bd1c44; /* dark: its highlight */
    --brand-surface-deep: #8a0f2c; /* dark: its depth */
    --road: #4a4950; /* dark: asphalt */
    --road-edge: #2a292e; /* dark: road shoulder */
    --pin-halo: #f4f3f1; /* dark: pin halo */
    --pin-ink: #1a191c; /* dark: the ink on a light pin (ink itself is light in dark and would vanish) */
    --marker: #1f4f8f; /* dark: module marker fill */
    --marker-ink: #ffffff; /* dark: module marker label */
    --van-body: #ffffff; /* dark: van body (decorative) */
    --van-cab: #424143; /* dark: van cab (decorative) */
    --van-band: #dc0032; /* dark: van band (decorative) */
    --van-wheel: #1a191c; /* dark: van tyres (decorative) */
    --van-hub: #a9a5a0; /* dark: van hubs (decorative) */
    --plate-edge: #33323a; /* dark: the sidebar plate rim, 1.46:1 against the canvas (D dark mock: 1.35:1 plate, E: no plate) */
    --card-edge: #33323a; /* dark: the card edge, 1.46:1 against the canvas (E dark mock: 1.30:1, D: 1.12:1) */
    --hero-surface: #424143; /* dark: the hero road's asphalt and a done stop's fill */
    --hero-node: #57555a; /* dark: an open stop's fill on the hero road */
    --hero-node-ring: #a9a5a0; /* dark: an open stop's ring on the hero road */
    --hero-now-ink: #bb0033; /* dark: the current stop's number on its light node (pin-halo is light in both modes) */
    /* material and elevation (dark) */
    --glass: rgba(29,28,32,0.86);
    --glass-strong: rgba(29,28,32,0.94);
    --edge: rgba(255,255,255,0.08);
    --glass-control: rgba(72,72,78,0.46);
    --glass-blur: blur(24px) saturate(1.6);
    --road-lane: rgba(255,255,255,0.55);
    --road-on-brand: rgba(20,0,6,0.45);
    --road-edge-on-brand: rgba(255,255,255,0.12);
    --scrim: rgba(0,0,0,0.6);
    --hover-tint: rgba(255,255,255,0.08);
    --surface-tint: #37363B;
    --glass-tint: rgba(50,49,52,0.87);
    --chrome-hover: rgba(255,255,255,0.10);
    --pin-shadow: rgba(0,0,0,0.55);
    --elevation-1: 0 1px 0 rgba(255,255,255,0.04) inset;
    --elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -14px rgba(0,0,0,0.6);
    --elevation-3: 0 24px 64px -16px rgba(0,0,0,0.8);
    /* illustrations (dark): decorative scenes, one file per mode */
  }
}