/* ==========================================================================
   UltraWideCheck — Design Tokens
   Premium compatibility database, dark by default with a light theme
   available. One controlled accent hue (user-selectable), a restrained
   status-color set, and a wide-format spacing scale.

   Theming model:
   - Surfaces / borders / text are redefined wholesale under
     :root[data-theme="light"] — light mode is a designed palette, not an
     inversion.
   - The accent is hue/saturation driven so any accent choice works in both
     themes: [data-accent="x"] sets --accent-h/--accent-s only, and theme
     sets the lightness stops (bright for dark bg, deep for light bg).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Surfaces (dark, default) ---- */
  --bg-canvas: #0a0b0d;
  --bg-canvas-raised: #0d0e11;
  --bg-panel: #131418;
  --bg-panel-raised: #17181d;
  --bg-panel-hover: #1c1e24;
  --bg-overlay: rgba(10, 11, 13, 0.86);

  /* ---- Borders (dark) ---- */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Text (dark) ---- */
  --text-primary: #edeef1;
  --text-secondary: #a3a7b0;
  --text-tertiary: #6d7078;
  --text-inverse: #0a0b0d;

  /* ---- Accent hue/saturation (overridden per data-accent) ---- */
  --accent-h: 215;
  --accent-s: 92%;

  /* ---- Accent lightness stops (overridden per theme) ---- */
  --accent-l9: 68%;
  --accent-l10: 60%;
  --accent-l11: 52%;
  --accent-lsoft: 68%;
  --accent-ltext: 78%;
  --accent-soft-a: 0.12;
  --accent-soft-strong-a: 0.22;
  --accent-border-a: 0.45;

  --accent-9: hsl(var(--accent-h) var(--accent-s) var(--accent-l9));
  --accent-10: hsl(var(--accent-h) var(--accent-s) var(--accent-l10));
  --accent-11: hsl(var(--accent-h) var(--accent-s) var(--accent-l11));
  --accent-text: hsl(var(--accent-h) var(--accent-s) var(--accent-ltext));
  --accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-lsoft) / var(--accent-soft-a));
  --accent-soft-strong: hsl(var(--accent-h) var(--accent-s) var(--accent-lsoft) / var(--accent-soft-strong-a));
  --border-accent: hsl(var(--accent-h) var(--accent-s) var(--accent-lsoft) / var(--accent-border-a));

  /* ---- Status colors (dark; compatibility semantics — never repurposed as accents) ---- */
  --status-excellent: #4ade80;
  --status-excellent-soft: rgba(74, 222, 128, 0.12);
  --status-excellent-border: rgba(74, 222, 128, 0.28);

  --status-good: #7dd3fc;
  --status-good-soft: rgba(125, 211, 252, 0.12);
  --status-good-border: rgba(125, 211, 252, 0.28);

  --status-partial: #fbbf62;
  --status-partial-soft: rgba(251, 191, 98, 0.12);
  --status-partial-border: rgba(251, 191, 98, 0.28);

  --status-poor: #f2685c;
  --status-poor-soft: rgba(242, 104, 92, 0.12);
  --status-poor-border: rgba(242, 104, 92, 0.28);

  --status-unknown: #8b8f99;
  --status-unknown-soft: rgba(139, 143, 153, 0.12);
  --status-unknown-border: rgba(139, 143, 153, 0.28);

  /* ---- Decorative (hero backdrop grid + secondary glow) ---- */
  --grid-line: rgba(255, 255, 255, 0.035);
  --hero-glow-2: rgba(74, 222, 128, 0.08);

  /* ---- Typography ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Shadows (subtle, no glow spam) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px var(--accent-soft-strong);

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-wide: 1440px;
  --container-panoramic: 1720px;
  --gutter: clamp(20px, 4vw, 56px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ==========================================================================
   Accent options — hue/saturation only, theme-independent
   ========================================================================== */

:root[data-accent="blue"]     { --accent-h: 215; --accent-s: 92%; }
:root[data-accent="violet"]   { --accent-h: 262; --accent-s: 82%; }
:root[data-accent="rose"]     { --accent-h: 340; --accent-s: 72%; }
:root[data-accent="teal"]     { --accent-h: 168; --accent-s: 62%; }
:root[data-accent="graphite"] { --accent-h: 220; --accent-s: 6%;  }

/* ==========================================================================
   Light theme — a designed palette, not an inverted dark theme
   ========================================================================== */

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

  --bg-canvas: #f4f5f7;
  --bg-canvas-raised: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-raised: #f1f2f5;
  --bg-panel-hover: #e7e9ed;
  --bg-overlay: rgba(244, 245, 247, 0.86);

  --border-subtle: rgba(15, 17, 21, 0.07);
  --border-default: rgba(15, 17, 21, 0.11);
  --border-strong: rgba(15, 17, 21, 0.20);

  --text-primary: #14161a;
  --text-secondary: #52565f;
  --text-tertiary: #797d86;
  --text-inverse: #ffffff;

  /* Deeper lightness stops so the accent stays legible on white */
  --accent-l9: 46%;
  --accent-l10: 40%;
  --accent-l11: 33%;
  --accent-lsoft: 46%;
  --accent-ltext: 38%;
  --accent-soft-a: 0.10;
  --accent-soft-strong-a: 0.16;
  --accent-border-a: 0.35;

  --status-excellent: #16a34a;
  --status-excellent-soft: rgba(22, 163, 74, 0.10);
  --status-excellent-border: rgba(22, 163, 74, 0.25);

  --status-good: #0284c7;
  --status-good-soft: rgba(2, 132, 199, 0.10);
  --status-good-border: rgba(2, 132, 199, 0.25);

  --status-partial: #c2760b;
  --status-partial-soft: rgba(194, 118, 11, 0.10);
  --status-partial-border: rgba(194, 118, 11, 0.25);

  --status-poor: #dc2626;
  --status-poor-soft: rgba(220, 38, 38, 0.10);
  --status-poor-border: rgba(220, 38, 38, 0.25);

  --status-unknown: #6b7280;
  --status-unknown-soft: rgba(107, 114, 128, 0.10);
  --status-unknown-border: rgba(107, 114, 128, 0.25);

  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 22, 26, 0.08);
  --shadow-lg: 0 24px 64px rgba(20, 22, 26, 0.12);

  --grid-line: rgba(15, 17, 21, 0.05);
  --hero-glow-2: rgba(22, 163, 74, 0.05);
}

/* Respect the OS preference on first visit, before any manual choice is
   stored (theme-init.js sets data-theme explicitly once the user has one). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg-canvas: #f4f5f7;
    --bg-canvas-raised: #ffffff;
    --bg-panel: #ffffff;
    --bg-panel-raised: #f1f2f5;
    --bg-panel-hover: #e7e9ed;
    --bg-overlay: rgba(244, 245, 247, 0.86);
    --border-subtle: rgba(15, 17, 21, 0.07);
    --border-default: rgba(15, 17, 21, 0.11);
    --border-strong: rgba(15, 17, 21, 0.20);
    --text-primary: #14161a;
    --text-secondary: #52565f;
    --text-tertiary: #797d86;
    --text-inverse: #ffffff;
    --accent-l9: 46%;
    --accent-l10: 40%;
    --accent-l11: 33%;
    --accent-lsoft: 46%;
    --accent-ltext: 38%;
    --status-excellent: #16a34a;
    --status-good: #0284c7;
    --status-partial: #c2760b;
    --status-poor: #dc2626;
    --status-unknown: #6b7280;
    --grid-line: rgba(15, 17, 21, 0.05);
    --hero-glow-2: rgba(22, 163, 74, 0.05);
  }
}