/*
 * Ndai design tokens: both themes, one file. See docs/design-system.md.
 * Linked from index.html ahead of the theme script and served unbundled, so the boot loader and the theme
 * script can rely on these before any JavaScript runs.
 * Dark is extracted from the shipped Alver Power EMS console; light is its sibling,
 * each value measured against its own surface.
 */

:root,
.light {
  color-scheme: light;

  /* surfaces: paper on an off-white desk. Canvas carries a trace of warmth; paper is white and
     lifted by a hairline and a layered shadow, never by a tint. */
  --background: #F2F2EF;
  --well: #ECECE8;
  --card: #FFFFFF;
  --popover: #FFFFFF;
  --muted: #EEEEEA;
  --accent: #E8E8E3;
  --sidebar: #FFFFFF;

  /* lines */
  --border: #E2E2DC;
  --border-strong: #C9C9C2;
  --grid: #EDEDE8;
  --sidebar-border: #E2E2DC;

  /* ink (measured on #F2F2EF / #FFFFFF: 16.8 / 18.9, 8.4 / 9.4, 5.9 / 6.6, 4.0 / 4.5; faint is units only) */
  --foreground: #111113;
  --text-secondary: #46464B;
  --muted-foreground: #5C5C62;
  --text-faint: #76767C;

  /* accent: action and alert only */
  --primary: #E00100;
  --primary-hover: #C40100;
  --primary-foreground: #FFFFFF;
  --signal: #E00100;
  --accent-text: #D00000;
  --focus-glow: rgba(224, 1, 0, 0.14);
  --selection: rgba(224, 1, 0, 0.16);

  /* status: mark / text */
  --ok: #12A150;
  --ok-text: #0B7A47;
  --warn: #CF8500;
  --warn-text: #9A5A00;
  --on-warn: #1A1206;
  --danger: #E00100;
  --danger-text: #D00000;
  --info: #2F6FE0;
  --info-text: #2457C5;
  --idle: #8B8B91;
  --idle-text: #5C5C62;

  /* charts (validated on #FFFFFF) */
  --chart-ink: #3B3B41;
  --chart-1: #2A78D6;
  --chart-2: #EB6834;
  --chart-3: #1BAF7A;
  --chart-4: #EDA100;
  --chart-5: #E87BA4;

  /* elevation */
  --panel-sheen: none;
  --shadow-panel: 0 1px 2px rgba(17, 17, 19, 0.04), 0 4px 8px -4px rgba(17, 17, 19, 0.04), 0 16px 32px -20px rgba(17, 17, 19, 0.12);
  --shadow-pop: 0 1px 2px rgba(17, 17, 19, 0.06), 0 8px 16px -8px rgba(17, 17, 19, 0.1), 0 24px 48px -20px rgba(17, 17, 19, 0.2);
  --shadow-dialog: 0 1px 2px rgba(17, 17, 19, 0.06), 0 12px 24px -12px rgba(17, 17, 19, 0.12), 0 40px 80px -32px rgba(17, 17, 19, 0.3);
  --overlay: rgba(17, 17, 19, 0.38);
  --headlight: rgba(17, 17, 19, 0.03);
  --headlight-edge: rgba(17, 17, 19, 0.14);
  --ambient-strength: 0.04;
  --hover-wash: rgba(17, 17, 19, 0.035);
  --headlamp: #E8A33A;
  --headlamp-strength: 0.32;

  /* shape */
  --radius-control: 8px;
  --radius-surface: 12px;
  --radius-sheet: 18px;

  /* type */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* motion */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sweep: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 120ms;
  --dur-hover: 200ms;
  --dur-enter: 450ms;
  --dur-route: 220ms;
}

.dark {
  color-scheme: dark;

  --background: #0A0B0F;
  --well: #0D0F14;
  --card: #111319;
  --popover: #121419;
  --muted: #16181F;
  --accent: #1A1D24;
  --sidebar: #0A0B0F;

  --border: #22252E;
  --border-strong: #343844;
  --grid: #1C1F27;
  --sidebar-border: #1A1D24;

  --foreground: #F4F5F7;
  --text-secondary: #9BA1AD;
  --muted-foreground: #8B919C;
  --text-faint: #6B7280;

  --primary: #E00100;
  --primary-hover: #C40100;
  --primary-foreground: #FFFFFF;
  --signal: #FE0100;
  --accent-text: #FF4F45;
  --focus-glow: rgba(254, 1, 0, 0.2);
  --selection: rgba(254, 1, 0, 0.35);

  --ok: #3DD68C;
  --ok-text: #3DD68C;
  --warn: #F5A524;
  --warn-text: #F5A524;
  --danger: #FE0100;
  --danger-text: #FF4F45;
  --info: #6EA0FF;
  --info-text: #6EA0FF;
  --idle: #6B7280;
  --idle-text: #8B919C;

  /* charts (validated on #111319) */
  --chart-ink: #C9CEDA;
  --chart-1: #3987E5;
  --chart-2: #D95926;
  --chart-3: #199E70;
  --chart-4: #C98500;
  --chart-5: #D55181;

  --panel-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%);
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 12px 30px -8px rgba(0, 0, 0, 0.8);
  --shadow-dialog: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  --overlay: rgba(0, 0, 0, 0.6);
  --headlight: rgba(255, 255, 255, 0.03);
  --headlight-edge: rgba(255, 255, 255, 0.16);
  --ambient-strength: 0.08;
  --hover-wash: rgba(255, 255, 255, 0.035);
  --headlamp: #FFFFFF;
  --headlamp-strength: 0.28;
}