/**
 * Byteion Core — semantic theme layer
 *
 * Layer order (downstream consumers should @import in this order):
 *   1. theme/generated/tokens.css   — primitives (auto-generated)
 *   2. theme/variables.css          — this file: semantic aliases (light + dark)
 *   3. theme/themes/<brand>.css     — optional brand overrides via [data-theme]
 *
 * Multi-theme contract:
 *   - Default light theme lives in :root and [data-theme="light"]
 *   - Default dark theme lives in .dark and [data-theme="dark"]
 *   - Brand themes apply via [data-theme="<brand>"] and may opt into dark via
 *     [data-theme="<brand>"][data-mode="dark"] OR by composing with .dark.
 *
 * All values are HSL triplets WITHOUT the hsl() wrapper so Tailwind can compose
 * `hsl(var(--color-primary) / <alpha-value>)` for opacity-aware utilities.
 */

/* ───────────────────── DEFAULT (light) ───────────────────── */
:root,
[data-theme="light"] {
  /* Surfaces */
  --color-background: 0 0% 100%;
  --color-foreground: 240 10% 3.9%;
  --color-card: 0 0% 100%;
  --color-card-foreground: 240 10% 3.9%;
  --color-popover: 0 0% 100%;
  --color-popover-foreground: 240 10% 3.9%;
  --color-muted: 240 4.8% 95.9%;
  --color-muted-foreground: 240 3.8% 43%; /* tuned to clear WCAG AA 4.5:1 vs muted */
  --color-accent: 240 4.8% 95.9%;
  --color-accent-foreground: 240 5.9% 10%;

  /* Brand */
  --color-primary: 217 91% 60%;
  --color-primary-foreground: 0 0% 100%;
  --color-secondary: 240 4.8% 95.9%;
  --color-secondary-foreground: 240 5.9% 10%;

  /* Status */
  /* Status semantic aliases resolve to accessible (≥ 3:1 vs white) shades.
     Components that need the brighter "tonal" scale value should use
     primitive utilities (bg-success-500, bg-warning-500). The semantic
     alias guarantees AA-passing UI button surfaces. */
  --color-success: 160 84% 30%;          /* ~success-700, AA UI */
  --color-success-foreground: 0 0% 100%;
  --color-warning: 32 92% 36%;           /* ~warning-700, AA UI */
  --color-warning-foreground: 0 0% 100%;
  --color-danger: 350 89% 47%;           /* ~danger-700, AA UI */
  --color-danger-foreground: 0 0% 100%;
  --color-info: 189 94% 28%;             /* ~info-700, AA UI */
  --color-info-foreground: 0 0% 100%;

  /* Form/structure */
  --color-border: 240 5.9% 90%;
  --color-input: 240 5.9% 90%;
  --color-ring: 217 91% 60%;

  /* Spacing legacy aliases (consumed by tailwind.preset) */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;

  /* Radius semantic aliases */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-button: 0.5rem;
  --radius-card: 0.75rem;
  --radius-input: 0.5rem;
  --radius-badge: 9999px;
  --radius-panel: 1rem;
  --radius-overlay: 1.25rem;

  /* z-index layers */
  --z-dropdown: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  /* Motion */
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --motion-slow: 320ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);

  /* Borders + focus */
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-card-hover: 0 6px 16px -4px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.06);
  --shadow-dropdown: 0 4px 24px -4px rgb(0 0 0 / 0.08), 0 2px 8px -2px rgb(0 0 0 / 0.04);
  --shadow-modal: 0 24px 48px -12px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.04);
  --shadow-popover: 0 12px 32px -8px rgb(0 0 0 / 0.12), 0 4px 12px -2px rgb(0 0 0 / 0.06);
  --shadow-inner-sm: inset 0 1px 2px 0 rgb(0 0 0 / 0.06);
  --shadow-button: 0 1px 0 0 rgb(0 0 0 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.06), inset 0 1px 0 0 rgb(255 255 255 / 0.06);
  --shadow-button-hover: 0 2px 0 0 rgb(0 0 0 / 0.05), 0 2px 4px 0 rgb(0 0 0 / 0.08), inset 0 1px 0 0 rgb(255 255 255 / 0.08);
  --shadow-field: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.04);
  --shadow-field-hover: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 2px 6px 0 rgb(0 0 0 / 0.05);
  --shadow-field-focus: 0 0 0 3px hsl(var(--color-ring) / 0.18), 0 1px 3px 0 rgb(0 0 0 / 0.07);
  --shadow-field-error: 0 0 0 3px hsl(var(--color-danger) / 0.15);
  --shadow-field-success: 0 0 0 3px hsl(var(--color-success) / 0.15);
  --shadow-field-dark: 0 1px 3px 0 rgb(0 0 0 / 0.3);
  --shadow-field-dark-hover: 0 1px 4px 0 rgb(0 0 0 / 0.4);
  --shadow-field-focus-dark: 0 0 0 3px hsl(var(--color-ring) / 0.25), 0 1px 4px 0 rgb(0 0 0 / 0.3);
  --shadow-field-error-dark: 0 0 0 3px hsl(var(--color-danger) / 0.2);
  --shadow-field-success-dark: 0 0 0 3px hsl(var(--color-success) / 0.2);
  --shadow-glow-primary: 0 0 0 4px hsl(var(--color-primary) / 0.18);
  --shadow-glow-danger: 0 0 0 4px hsl(var(--color-danger) / 0.18);
  --shadow-glow-success: 0 0 0 4px hsl(var(--color-success) / 0.18);
}

/* ───────────────────── DARK ───────────────────── */
.dark,
[data-theme="dark"] {
  --color-background: 240 10% 3.9%;     /* zinc-950 */
  --color-foreground: 0 0% 98%;
  --color-card: 240 6% 10%;             /* zinc-900 — slightly elevated above background */
  --color-card-foreground: 0 0% 98%;
  --color-popover: 240 6% 10%;          /* zinc-900 */
  --color-popover-foreground: 0 0% 98%;
  --color-muted: 240 3.7% 15.9%;
  --color-muted-foreground: 240 5% 64.9%;
  --color-accent: 240 3.7% 15.9%;
  --color-accent-foreground: 0 0% 98%;

  --color-primary: 217 91% 60%;
  --color-primary-foreground: 0 0% 100%;
  --color-secondary: 240 3.7% 15.9%;
  --color-secondary-foreground: 0 0% 98%;

  --color-border: 240 3.7% 15.9%;
  --color-input: 240 3.7% 15.9%;
  --color-ring: 217 91% 60%;
}

/* ───────────────────── REDUCED MOTION ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-normal: 0ms;
    --motion-slow: 0ms;
  }
}