/*
  Design tokens for Done Right Electric — v2 "Live Panel" theme.
  Source of truth: docs/brand-identity.md — update both together.

  Theme model: dark is the default and lives on :root. Light-mode overrides
  sit in :root[data-theme="light"]. The attribute is set before first paint
  by the inline script in partials/header.ejs (reads localStorage), so there
  is no flash of the wrong theme and no-JS visitors still get dark by default.
*/

:root {
  color-scheme: dark;

  /* ---- Brand hues (constant across themes; sampled from the logo) ---- */
  --color-navy-900: #101E42;
  --color-navy-700: #1B3268;
  --color-navy-400: #5B7FC4; /* brightened navy for dark-mode text/links */
  --color-navy-100: #DCE3F0;

  --color-steel-700: #4B4D53;
  --color-steel-500: #8B8D93;
  --color-steel-300: #C7C9CE;

  --color-accent-600: #C24C02;
  --color-accent-500: #E85D04;
  --color-accent-400: #FF8A3D;
  --color-accent-glow: rgba(232, 93, 4, 0.55);

  --color-white: #FFFFFF;
  --color-charcoal-900: #1A1C21;
  --color-charcoal-700: #45484F;

  /* ---- Surfaces & text — dark (default) ---- */
  --bg-canvas: #0A0D14;
  --bg-canvas-alt: #0F1421;
  --surface-1: #141926;
  --surface-2: #1B2233;
  --surface-3: #232B40;
  --border-hairline: rgba(139, 141, 147, 0.22);
  --border-strong: rgba(199, 201, 206, 0.32);

  --text-primary: #ECEEF3;
  --text-secondary: #A2A9BA;
  --text-muted: #6C7386;
  --text-on-accent: #100A05;
  --color-border: var(--border-hairline);
  --color-offwhite: var(--bg-canvas);

  /* Glass */
  --glass-surface: rgba(27, 41, 66, 0.44);
  --glass-surface-strong: rgba(20, 30, 51, 0.72);
  --glass-border: rgba(199, 201, 206, 0.18);
  --glass-blur: 16px;
  --glass-sheen: rgba(255, 255, 255, 0.06);

  /* Neomorphic shadow pair (dark: light source upper-left, faint) */
  --neu-light: rgba(255, 255, 255, 0.035);
  --neu-dark: rgba(0, 0, 0, 0.6);

  /* Semantic */
  --color-success: #57C57F;
  --color-success-bg: rgba(46, 125, 70, 0.22);
  --color-error: #E4695E;
  --color-error-bg: rgba(179, 38, 30, 0.22);
  --color-warning: #E4A23D;
  --color-warning-bg: rgba(200, 122, 0, 0.2);
  --color-info: #7C9EE0;
  --color-info-bg: rgba(62, 99, 166, 0.22);

  /* Type families */
  --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Type scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.25rem;
  --font-size-3xl: 3.25rem;
  --font-size-4xl: clamp(3rem, 7vw, 5.25rem);

  --line-height-tight: 1.12;
  --line-height-body: 1.6;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius / signature chamfer (cut sheet-metal corner, not rounded) */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --chamfer: 14px;
  --chamfer-sm: 8px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* Elevation (drop-shadow — survives clip-path, unlike box-shadow) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 0 1px rgba(232, 93, 4, 0.35), 0 0 28px rgba(232, 93, 4, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration-med: 420ms;
  --duration-slow: 900ms;

  --container-width: 1120px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-canvas: #F4F5F6;
  --bg-canvas-alt: #ECEEF2;
  --surface-1: #FFFFFF;
  --surface-2: #F7F8FA;
  --surface-3: #EEF1F5;
  --border-hairline: rgba(27, 50, 104, 0.14);
  --border-strong: rgba(27, 50, 104, 0.28);

  --text-primary: #191C22;
  --text-secondary: #45484F;
  --text-muted: #6E7280;
  --text-on-accent: #FFFFFF;
  --color-border: var(--border-hairline);
  --color-offwhite: var(--bg-canvas);

  --glass-surface: rgba(255, 255, 255, 0.55);
  --glass-surface-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(27, 50, 104, 0.14);
  --glass-sheen: rgba(255, 255, 255, 0.5);

  --neu-light: rgba(255, 255, 255, 0.9);
  --neu-dark: rgba(16, 30, 66, 0.16);

  --color-success: #2E7D46;
  --color-success-bg: #E3F1E7;
  --color-error: #B3261E;
  --color-error-bg: #FBE7E5;
  --color-warning: #C87A00;
  --color-warning-bg: #FBEDD3;
  --color-info: #3E63A6;
  --color-info-bg: #E4EAF5;

  --shadow-sm: 0 1px 2px rgba(16, 30, 66, 0.1);
  --shadow-md: 0 8px 20px rgba(16, 30, 66, 0.12);
  --shadow-glow: 0 0 0 1px rgba(232, 93, 4, 0.3), 0 0 22px rgba(232, 93, 4, 0.18);
}