/*
 * Spark design tokens — shared by the client portal and the platform admin.
 *
 * Load order: tokens.css -> shell.css -> spark.css (portal) | platform.css (admin).
 * This file holds only fonts and custom properties; it never styles elements.
 * Theme is chosen by theme.js through html[data-theme="light|dark"].
 */

/* Brand typography from vrp.ignition.sk; fonts distributed with their SIL OFL licenses. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Theme-independent scale. */
html:root {
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-xl: 27px;

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

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Breakpoints (documentation only; CSS cannot read variables in media queries):
     wide >= 1300px, compact <= 1100px, drawer <= 900px, phone <= 560px. */
}

/* Light theme. `html:root` also matches in dark mode, so the dark block below
   redefines every colour token it shares with this block. */
html:root,
html[data-theme="light"] {
  --canvas: #f7f8fa;
  --surface: #fff;
  --surface-alt: #EFF1F4;
  --text: #14171A;
  --muted: #5B6167;
  --line: #E3E6EB;

  --accent: #FF751A;
  --accent-hover: #F0680A;
  /* Dark text on orange: ~6.7:1 contrast (WCAG AA for all text sizes). */
  --accent-text: #241308;
  --link: #A84D00;
  --focus-ring: #C25E00;

  --danger: #b42332;
  --danger-bg: #fdecee;
  --danger-contrast: #fff;
  --warning: #8a4b00;
  --warning-bg: #fff3e2;
  --success: #246744;
  --success-bg: #e8f4ed;
  --info: #1d5a91;
  --info-bg: #e8f1fa;

  --chart-red: #d51f35;
  --chart-orange: #ef741d;

  --card-border: rgba(227, 230, 235, .65);
  --card-radius: 24px;
  --shadow: 0 8px 32px -16px rgba(20, 23, 26, .12);
  --control-shadow: 0 4px 12px -5px rgba(20, 23, 26, .06);
  --popover-shadow: 0 20px 55px -12px rgba(20, 23, 26, .16);

  color-scheme: light;
}

html[data-theme="dark"] {
  --canvas: #14171A;
  --surface: #1C2025;
  --surface-alt: #272C32;
  --text: #F6F5EF;
  --muted: #A7AEB5;
  --line: #363C43;

  --accent: #FF751A;
  --accent-hover: #FF8A3D;
  --accent-text: #241308;
  --link: #F9A94E;
  --focus-ring: #FF751A;

  --danger: #ffb4b4;
  --danger-bg: rgba(255, 100, 118, .14);
  --danger-contrast: #14171A;
  --warning: #ffcf8a;
  --warning-bg: rgba(255, 161, 84, .14);
  --success: #90ddb3;
  --success-bg: rgba(144, 221, 179, .12);
  --info: #a9cff5;
  --info-bg: rgba(156, 200, 245, .12);

  --chart-red: #ff6476;
  --chart-orange: #ffa154;

  --card-border: rgba(255, 255, 255, .035);
  --card-radius: 24px;
  --shadow: 0 10px 32px -16px #0008;
  --control-shadow: 0 4px 12px -5px rgba(0, 0, 0, .2);
  --popover-shadow: 0 20px 55px -12px rgba(0, 0, 0, .6);

  color-scheme: dark;
}