/* Design Tokens & CSS Custom Properties — Workshop Fuel Tracker (RHD_FMS) */
:root {
  /* Native widgets (date pickers, selects, scrollbars) follow the theme. */
  color-scheme: light;
  --focus-ring: 0 0 0 3px rgba(26, 111, 196, 0.35);
  /* Chart marks: single-series hue validated against the card surface (dataviz validator). */
  --viz-1: #1a6fc4;
  /* Product categories (dataviz validator: categorical, light surface). */
  --cat-fuel: #d97706;
  --cat-lubricant: #92400e;
  --cat-hydraulic: #1a6fc4;
  --cat-coolant: #0d9488;
  --cat-brake: #b3261e;
  --cat-other: #7c3aed;

  /* Government Fleet Navy & Brand Palette */
  --navy: #0b2545;
  --navy-950: #06121f;
  --navy-800: #13315c;
  --navy-600: #1b4079;

  --brand: #1a6fc4;
  --brand-600: #155a9e;
  --brand-700: #0f4c81;
  --brand-50: #eaf2fb;
  --brand-100: #d4e5f7;

  /* Fills behind white text (solid buttons, error toasts, active pills). Not redefined in the
     dark theme: its lighter --brand / --ok / --danger give white text only 1.9-2.8:1. */
  --fill-brand: #1a6fc4;
  --fill-brand-hover: #155a9e;
  --fill-ok: #0f7b53;
  --fill-danger: #b3261e;

  /* Surfaces & Canvas (Light Mode) */
  --bg: #f4f6fa;
  --bg-2: #eef2f7;
  --bg-hover: #eaf2fb;
  --card: #ffffff;
  --card-2: #fbfcfe;

  /* Borders & Dividers */
  --line: #e3e8ef;
  --line-2: #eef2f7;
  --line-3: #d8e0ea;
  /* Form fields: a tinted well and an outline of at least 3:1 (WCAG 1.4.11), so an input reads
     as a place to type on every surface. */
  --field-bg: #f7f9fc;
  --field-border: #7d8ea4;
  --field-border-hover: #5b6b80;
  --select-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* Typography Colors */
  --text: #16212e;
  --text-2: #3d4b5e;
  --muted: #5b6b80;  /* >= 4.8:1 on every light surface */
  --muted-2: #8496ab;

  /* Semantic Feedback & Categories */
  --ok: #0f7b53;
  --ok-bg: #e6f5ee;
  --ok-border: #bfe6d3;

  --warn: #b45309;
  --warn-bg: #fdf3e3;
  --warn-border: #f4dcb6;

  --danger: #b3261e;
  --danger-bg: #fdeceb;
  --danger-border: #f5c5c2;

  --info: #155a9e;
  --info-bg: #eaf2fb;
  --info-border: #c5dbf3;

  --purple: #6d28d9;
  --purple-bg: #f3e8fd;
  --purple-border: #ddd6fe;

  --teal: #0f766e;  /* 4.8:1 on --teal-bg (badge text) */
  --teal-bg: #e0f5f2;

  --pink: #be185d;
  --pink-bg: #fdeaf3;

  --brown: #92400e;
  --brown-bg: #fef3e2;

  /* Shape & Metrics */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows & Elevation */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.11);
  --shadow-lg: 0 24px 48px rgba(16, 24, 40, 0.22);

  /* Layout Dimensions */
  --sidebar-w: 272px;
  --topbar-h: 64px;
  --bottombar-height: 64px;
  --touch-target-min: 44px;

  /* Typography */
  --font-sans: 'Inter', 'Kalpurush', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Glassmorphism Tokens (Light Mode) */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-subtle: rgba(255, 255, 255, 0.65);
  --glass-bg-elevated: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-border-subtle: rgba(226, 232, 240, 0.75);
  --glass-blur: blur(20px);
  --mesh-bg: radial-gradient(at 0% 0%, rgba(219, 234, 254, 0.65) 0px, transparent 50%),
             radial-gradient(at 100% 0%, rgba(237, 233, 254, 0.5) 0px, transparent 50%),
             radial-gradient(at 50% 100%, rgba(224, 242, 254, 0.45) 0px, transparent 50%),
             var(--mesh-base);
  --mesh-base: #f6f8fc;
  --sidebar-glass-bg: rgba(255, 255, 255, 0.85);
  --sidebar-glass-border: rgba(226, 232, 240, 0.82);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  color-scheme: dark;
  --focus-ring: 0 0 0 3px rgba(74, 158, 240, 0.45);
  /* Stepped for the dark surface: #4a9ef0 fails the dark lightness band. */
  --viz-1: #3b8be0;
  /* Stepped for the dark surface; lubricant is under 3:1, so legends always carry labels. */
  --cat-fuel: #c48512;
  --cat-lubricant: #9a4a1c;
  --cat-hydraulic: #3b8be0;
  --cat-coolant: #14a88a;
  --cat-brake: #e5484d;
  --cat-other: #9f7aea;

  --navy: #060f1e;
  --navy-950: #030811;
  --navy-800: #0d1e35;
  --navy-600: #15294a;

  --brand: #4a9ef0;
  --brand-600: #3b8be0;
  --brand-700: #1a6fc4;
  --brand-50: #0f2440;
  --brand-100: #132a48;

  --bg: #0a1420;
  --bg-2: #0f1c2e;
  --bg-hover: #16263c;
  --card: #111e30;
  --card-2: #16263c;

  --line: #20304a;
  --line-2: #1a293f;
  --line-3: #2a3c58;
  --field-bg: #0b1626;
  --field-border: #62779a;
  --field-border-hover: #94a3b8;
  --select-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238297b0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --text: #f8fafc;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --muted-2: #64748b;

  --ok: #34d399;
  --ok-bg: #0d2e22;
  --ok-border: #1a4c3a;

  --warn: #fbbf24;
  --warn-bg: #3a2a0c;
  --warn-border: #5a4014;

  --danger: #f87171;
  --danger-bg: #3a1412;
  --danger-border: #5c2320;

  --info: #60a5fa;
  --info-bg: #122a48;
  --info-border: #1e4270;

  --purple: #c4b5fd;
  --purple-bg: #26184a;
  --purple-border: #4c288f;

  --teal: #5eead4;
  --teal-bg: #0d3330;

  --pink: #f9a8d4;
  --pink-bg: #3a0f24;

  --brown: #fbbf24;
  --brown-bg: #3a2a0c;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.7);

  /* Glassmorphism Tokens (Dark Mode) */
  --glass-bg: rgba(15, 26, 42, 0.82);
  --glass-bg-subtle: rgba(15, 26, 42, 0.65);
  --glass-bg-elevated: rgba(19, 33, 54, 0.92);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-subtle: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(20px);
  --mesh-bg: radial-gradient(at 0% 0%, rgba(30, 58, 138, 0.28) 0px, transparent 50%),
             radial-gradient(at 100% 0%, rgba(67, 56, 202, 0.2) 0px, transparent 50%),
             radial-gradient(at 50% 100%, rgba(14, 116, 144, 0.2) 0px, transparent 50%),
             var(--mesh-base);
  --mesh-base: #080e18;
  --sidebar-glass-bg: rgba(11, 20, 34, 0.88);
  --sidebar-glass-border: rgba(255, 255, 255, 0.08);
}