/* ============================================================================
   FleetNord — design tokens
   One source of truth for color, type, spacing, radius, shadow and motion.
   Change --accent (Settings → Branding) and the whole product re-skins.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --accent: #3b6cf6;
  --accent-ink: #ffffff;

  /* ---- Type ------------------------------------------------------------- */
  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;

  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;  --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px;

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px;
  --r-2xl: 22px; --r-pill: 999px;

  /* ---- Layout ----------------------------------------------------------- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --page-max: 1600px;
  --row-h: 44px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 110ms;
  --t-med: 190ms;
  --t-slow: 320ms;

  --z-sticky: 20;
  --z-drawer: 60;
  --z-modal: 80;
  --z-palette: 90;
  --z-toast: 100;
}

/* ---- Light theme -------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6f9;
  --bg-sunken: #eceff4;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f4f8;
  --surface-inset: #f6f8fb;
  --sidebar-bg: #0f1420;
  --sidebar-ink: #c3cbdb;
  --sidebar-ink-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, .07);
  --sidebar-active: rgba(255, 255, 255, .11);

  --border: #e3e8ef;
  --border-strong: #cdd5e0;
  --border-subtle: #eef1f6;

  --ink: #0e1521;
  --ink-2: #364152;
  --ink-3: #5c6b7f;
  --muted: #7a889b;
  --faint: #9aa6b7;

  --accent-soft: color-mix(in srgb, var(--accent) 11%, #ffffff);
  --accent-soft-2: color-mix(in srgb, var(--accent) 18%, #ffffff);
  --accent-ink-on-soft: color-mix(in srgb, var(--accent) 78%, #000000);

  --success: #0f9d63; --success-soft: #e6f6ee; --success-ink: #08603c;
  --warning: #d97706; --warning-soft: #fdf1e0; --warning-ink: #8a4b04;
  --danger:  #dc3a32; --danger-soft:  #fdecec; --danger-ink:  #93221d;
  --info:    #0a86c6; --info-soft:    #e4f3fb; --info-ink:    #0a5578;
  --purple:  #6f4df3; --purple-soft:  #eeeafe; --purple-ink:  #4527ab;
  --neutral-soft: #eff2f6; --neutral-ink: #475467;

  --shadow-xs: 0 1px 2px rgba(15, 25, 45, .05);
  --shadow-sm: 0 1px 2px rgba(15, 25, 45, .06), 0 1px 3px rgba(15, 25, 45, .05);
  --shadow-md: 0 2px 4px rgba(15, 25, 45, .05), 0 6px 16px rgba(15, 25, 45, .07);
  --shadow-lg: 0 8px 28px rgba(15, 25, 45, .12), 0 2px 6px rgba(15, 25, 45, .06);
  --shadow-xl: 0 24px 64px rgba(15, 25, 45, .18);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);

  --chart-grid: #e8edf3;
  --chart-axis: #98a4b5;
}

/* ---- Dark theme --------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a0d14;
  --bg-sunken: #070910;
  --surface: #121722;
  --surface-2: #171d2a;
  --surface-3: #1d2533;
  --surface-inset: #0e131d;
  --sidebar-bg: #0c1019;
  --sidebar-ink: #98a3b8;
  --sidebar-ink-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, .06);
  --sidebar-active: rgba(255, 255, 255, .1);

  --border: #232c3d;
  --border-strong: #33405a;
  --border-subtle: #1a2231;

  --ink: #e9eef7;
  --ink-2: #c3ccdc;
  --ink-3: #9aa6bb;
  --muted: #7d8aa1;
  --faint: #64708a;

  --accent-soft: color-mix(in srgb, var(--accent) 20%, #0e1420);
  --accent-soft-2: color-mix(in srgb, var(--accent) 30%, #0e1420);
  --accent-ink-on-soft: color-mix(in srgb, var(--accent) 55%, #ffffff);

  --success: #2dd48a; --success-soft: #0d2a20; --success-ink: #7ce7b6;
  --warning: #f5a524; --warning-soft: #2d2113; --warning-ink: #f8c973;
  --danger:  #f4635a; --danger-soft:  #2e1717; --danger-ink:  #ff9b94;
  --info:    #38b6ec; --info-soft:    #0d2532; --info-ink:    #85d5f5;
  --purple:  #9d85ff; --purple-soft:  #1f1b3a; --purple-ink:  #c3b2ff;
  --neutral-soft: #1c2434; --neutral-ink: #a8b4c8;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, .58), 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);

  --chart-grid: #1f2836;
  --chart-axis: #5d6b81;
}

/* ---- Compact density ---------------------------------------------------- */
[data-density="compact"] {
  --row-h: 36px;
  --fs-base: 13px;
  --fs-md: 12.5px;
  --s-6: 18px;
  --s-5: 16px;
}

/* ---- Categorical chart palette -----------------------------------------
   A fixed, validated eight-slot order. Hues are assigned to series in this
   order and never cycled or reshuffled when a filter changes the series
   count, so a colour always means the same thing. The dark column is the
   same eight hues re-stepped for the dark surface, not an automatic flip.
   Both sets pass the lightness band, chroma floor, colour-vision-deficiency
   separation and normal-vision separation checks against this app's own
   surfaces. Three light slots sit under 3:1 contrast by design — every chart
   therefore ships a legend and a tooltip, and reports export to CSV, so
   identity is never carried by colour alone.
   ------------------------------------------------------------------------- */
:root {
  --c1: #2a78d6;   /* blue    */
  --c2: #eb6834;   /* orange  */
  --c3: #1baf7a;   /* aqua    */
  --c4: #eda100;   /* yellow  */
  --c5: #e87ba4;   /* magenta */
  --c6: #008300;   /* green   */
  --c7: #4a3aa7;   /* violet  */
  --c8: #e34948;   /* red     */

  /* Single-series marks follow the company's accent colour. */
  --chart-primary: var(--accent);
}
[data-theme="dark"] {
  --c1: #3987e5;
  --c2: #d95926;
  --c3: #199e70;
  --c4: #c98500;
  --c5: #d55181;
  --c6: #008300;
  --c7: #9085e9;
  --c8: #e66767;
}