/* Design tokens: the only place with colour values (UI_REFRESH 2.1, acceptance 6).
   Source: SWARCO ITS "Corporate design Overview" (May 2026). Groups:
   1. Brand: colours and fonts exactly as in the overview.
   2. Semantic: roles in this tool, built only from the brand tokens.
   3. Layout: spacing, radius, shadow, motion. Not specified in the overview (cards there are rounded).
   4. Functional: status and error colours. Not brand colours; needed for ratings and warnings.
   5. Data palettes: vehicle classes, zone types, directions. Not brand colours; they encode data and
      must stay distinguishable on maps and charts.
   JavaScript reads these with token("--name") (core.js); the printable report embeds this file. */

@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("/static/brand/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("/static/brand/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

:root {
  /* 1. Brand (overview: Colors; Our headline font) */
  --swarco-orange: #f39000;        /* CMYK 0 51 100 0, Pantone 144 C, RAL 2011 */
  --swarco-black: #000000;         /* Pantone Black C, RAL 9005 */
  --swarco-grey: #232323;          /* General Grey, Pantone 447 C, RAL 9004 */
  --swarco-light-grey: #e3e7e9;    /* Light Grey, Pantone 427 C, RAL 9006 */
  --swarco-white: #ffffff;         /* Pantone 9061 C, RAL 9016 */
  --font-headline: "Montserrat", Arial, Helvetica, sans-serif;   /* Montserrat Bold */
  --font-text: Arial, Helvetica, sans-serif;                      /* Arial Regular, Bold for sublines */
  --chapter-opacity: 0.48;         /* chapter numerals "with 52% transparency" */

  /* 2. Semantic roles */
  --color-primary: var(--swarco-orange);          /* fills, markers, the one primary action */
  --color-on-primary: var(--swarco-black);        /* text on orange: 8.6:1 */
  --color-text: var(--swarco-grey);               /* 15.9:1 on white */
  --color-text-inverse: var(--swarco-white);
  --color-muted: color-mix(in srgb, var(--swarco-grey) 72%, var(--swarco-white));   /* 5.9:1 on white */
  --color-header: var(--swarco-black);
  --color-header-muted: color-mix(in srgb, var(--swarco-white) 72%, var(--swarco-black));
  --color-header-line: color-mix(in srgb, var(--swarco-white) 22%, var(--swarco-black));
  --color-bg: color-mix(in srgb, var(--swarco-light-grey) 45%, var(--swarco-white));
  --color-surface: var(--swarco-white);
  --color-surface-raised: var(--swarco-white);
  --color-line: var(--swarco-light-grey);
  --color-line-strong: color-mix(in srgb, var(--swarco-light-grey) 70%, var(--swarco-grey));
  --color-hover: color-mix(in srgb, var(--swarco-light-grey) 35%, var(--swarco-white));
  --color-selected: color-mix(in srgb, var(--swarco-orange) 18%, var(--swarco-white));
  --color-focus: var(--swarco-orange);
  --color-overlay: color-mix(in srgb, var(--swarco-black) 45%, transparent);
  --color-map-empty: var(--swarco-light-grey);
  --color-skeleton: var(--swarco-light-grey);
  --color-skeleton-shine: color-mix(in srgb, var(--swarco-light-grey) 40%, var(--swarco-white));
  --color-chart-axis: var(--color-line-strong);
  --color-chart-grid: var(--swarco-light-grey);
  --color-gap: color-mix(in srgb, var(--swarco-light-grey) 80%, var(--swarco-grey));   /* playback: no recording */
  --color-highlight: var(--swarco-white);       /* selected track and drawing on the map */
  --color-highlight-casing: var(--swarco-black);
  --color-flow: var(--swarco-orange);

  /* 3. Layout */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-s: 4px; --radius: 8px; --radius-l: 12px; --radius-pill: 999px;
  --shadow-1: 0 1px 3px color-mix(in srgb, var(--swarco-black) 14%, transparent);
  --shadow-2: 0 6px 24px color-mix(in srgb, var(--swarco-black) 18%, transparent);
  --header-h: 56px; --bar-h: 52px;
  --motion: 160ms ease-out;      /* at most 200 ms (brief 9) */
  --font-size: 14px; --font-size-s: 12px; --font-size-l: 16px;
  --numeral-size: 40px; --numeral-size-s: 28px;

  /* 4. Functional (not brand) */
  --status-good: #1e7b34;
  --status-warning: #9a4a00;
  --status-poor: #b3261e;
  --status-good-soft: #e6f3e9;
  --status-warning-soft: #fff4dc;
  --status-warning-line: #f0c67a;
  --status-poor-soft: #fbe9e7;
  --color-error: var(--status-poor);

  /* 5. Data palettes (not brand) */
  --class-0: #9e9e9e;  --class-1: #e91e63;  --class-2: #00bcd4;  --class-3: #8bc34a;  --class-4: #cddc39;
  --class-5: #2f7fd8;  --class-6: #ff9800;  --class-7: #9c27b0;  --class-8: #e53935;  --class-9: #795548;
  --class-10: #ffeb3b; --class-11: #009688; --class-15: #607d8b; --class-none: #9e9e9e;
  --length-1: #2f7fd8; --length-2: #ff9800; --length-3: #e53935; --length-4: #8e24aa; --length-5: #00897b;
  --zone-zone: var(--swarco-orange); --zone-approach: #00a844; --zone-exit: #e0123c; --zone-line: #0091ea; --zone-lane: #aa00ff;
  --dir-1: #e53935; --dir-2: #fb8c00; --dir-3: #fdd835; --dir-4: #43a047; --dir-5: #00acc1; --dir-6: #1e88e5; --dir-7: #8e24aa; --dir-8: #d81b60;
  --track-1: #e6194b; --track-2: #3cb44b; --track-3: #ffe119; --track-4: #4363d8; --track-5: #f58231;
  --track-6: #911eb4; --track-7: #46f0f0; --track-8: #f032e6; --track-9: #bcf60c; --track-10: #fabebe;
  --quality-low: #d32f2f; --quality-mid: #fbc02d; --quality-high: #388e3c; --quality-oor: #fb8c00;
  /* speed gradient of trajectories, slow to fast (not from the templates) */
  --speed-1: #b3261e; --speed-2: #f57c00; --speed-3: #fbc02d; --speed-4: #7cb342; --speed-5: #1e7b34;
}