/*
 * Roadcast design tokens. docs/roadcast/design-system.md is the source of
 * truth, and this is the only file that defines the named values.
 *
 * Everything here is deliberately unscoped: custom properties do not compete
 * with Tailwind's runtime output, and :root plus html.dark is what standalone
 * pages need too. Every other overlay file nests inside html:not(#\#).
 *
 * --primary-NNN are not defined here and must never be. index.html emits them
 * per company, and the overlay middleware adds the shades it leaves out, so
 * defining one here would freeze every company on this file's colour. The
 * var() fallbacks below only fire on a database with no theme rows at all.
 */

@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../../fonts/overpass-latin-wght-normal.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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Named values */
  --rc-asphalt: #15191B;
  --rc-asphalt-2: #20262A;
  --rc-signal-teal: #69C3BA;
  --rc-deep-teal: #2A7F77;
  --rc-haze: #F3F5F5;
  --rc-card: #FFFFFF;
  --rc-ink: #1C2326;
  --rc-muted-ink: #5F6B70;
  --rc-hairline: #E3E7E8;
  --rc-go: #2E7D57;
  --rc-caution: #B7791F;
  --rc-stop: #C8372D;
  --rc-route: #2F6FB3;

  /* Surfaces and ink */
  --background: var(--rc-haze);
  --foreground: var(--rc-ink);
  --card: var(--rc-card);
  --card-foreground: var(--rc-ink);
  --popover: var(--rc-card);
  --popover-foreground: var(--rc-ink);

  /* Primary follows the selected company theme, so the other themes keep
     working. White on --primary-600 is what every seeded theme is built for. */
  --primary: var(--primary-600, var(--rc-deep-teal));
  --primary-foreground: #FFFFFF;

  /* A secondary button is a card with a hairline, not a filled grey. */
  --secondary: var(--rc-card);
  --secondary-foreground: var(--rc-ink);

  --muted: var(--rc-haze);
  --muted-foreground: var(--rc-muted-ink);

  --accent: var(--primary-100, var(--rc-haze));
  --accent-foreground: var(--primary-800, var(--rc-ink));

  --destructive: var(--rc-stop);
  --destructive-foreground: #FFFFFF;

  --border: var(--rc-hairline);
  --input: var(--rc-hairline);

  /* Signal Teal in our theme. The middleware overrides this on the 12 themes
     whose primary-400 is a near-white tint that would not show on a card. */
  --ring: var(--primary-400, var(--rc-signal-teal));

  /* Shape: by role, not one value everywhere */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Depth: only for things that float */
  --shadow-float: 0 8px 24px rgb(21 25 27 / .12), 0 2px 6px rgb(21 25 27 / .08);
  --scrim: rgb(15 18 20 / .55);

  /* The asphalt sidebar. It stays asphalt in both modes.
     sidebar.html sets its own --sidebar-accent on #sidebar and #sidebarFlyout
     (a theme colour, not this surface), so until that style block is replaced
     this value does not reach inside those two elements. */
  --sidebar: var(--rc-asphalt);
  --sidebar-foreground: #E6EAEB;
  --sidebar-muted: #98A4A9;
  --sidebar-accent: var(--rc-asphalt-2);
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #2A3136;

  /* Status is a traffic signal. A badge is the soft tint with a solid dot. */
  --go: var(--rc-go);
  --go-soft: #EAF4EF;
  --caution: var(--rc-caution);
  --caution-soft: #FAF1E2;
  --stop: var(--rc-stop);
  --stop-soft: #FBEAE8;
  --route: var(--rc-route);
  --route-soft: #E9F1F9;

  /* Type. Overpass for titles, headings, KPI numerals and the wordmark. */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Overpass", var(--font-sans);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --type-12: 12px;
  --type-13: 13px;
  --type-14: 14px;
  --type-16: 16px;
  --type-20: 20px;
  --type-24: 24px;
  --type-30: 30px;
  --type-36: 36px;
  --leading-base: 20px;
  --tracking-display: -0.01em; /* from 20px up */
  --numeric-features: "tnum";
}

html.dark {
  --background: #0F1214;
  --foreground: #E6EAEB;
  --card: #171B1E;
  --card-foreground: #E6EAEB;
  --popover: #171B1E;
  --popover-foreground: #E6EAEB;

  --primary: var(--primary-600, var(--rc-deep-teal));
  --primary-foreground: #FFFFFF;

  --secondary: #171B1E;
  --secondary-foreground: #E6EAEB;

  --muted: var(--rc-asphalt-2);
  --muted-foreground: #98A4A9;

  --accent: var(--rc-asphalt-2);
  --accent-foreground: var(--primary-300, #E6EAEB);

  --destructive: var(--rc-stop);
  --destructive-foreground: #FFFFFF;

  --border: #2A3136;
  --input: #2A3136;

  /* Every theme's primary-400 reads well on a dark card, so no override. */
  --ring: var(--primary-400, var(--rc-signal-teal));

  --shadow-float: 0 8px 24px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .3);

  /* One step darker than the light-mode asphalt, and past the dark canvas, so
     the sidebar still reads as its own surface. */
  --sidebar: #0B0E10;
  --sidebar-foreground: #E6EAEB;
  --sidebar-muted: #98A4A9;
  --sidebar-accent: #171B1E;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #20262A;

  /* The signals lift on dark so they stay readable as text. The soft tints
     are opaque on purpose: a badge can sit in a sticky column, which has to
     stay opaque in both modes. */
  --go: #57B58A;
  --go-soft: #21342F;
  --caution: #DBA54A;
  --caution-soft: #363125;
  --stop: #EC7C72;
  --stop-soft: #392B2B;
  --route: #74AEE8;
  --route-soft: #26333E;
}