/* ═══════════════════════════════════════════════════════════════
   EVIDENT — Dark Mode Implementation
   
   Uses existing gemstone tokens from tokens.css:
   - Obsidian/Nuummite for dark backgrounds
   - Adjusted Sapphire for primary
   - Pearl/Selenite inverted for text
   
   Respects prefers-color-scheme and manual toggle
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;
}

/* ── Dark Mode Variables ──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surfaces (inverted) */
    --surface-base: var(--color-obsidian, #0e1528);
    --surface-card: rgb(20 30 48 / 90%);
    --surface-card-solid: #141e30;
    --surface-elevated: rgb(30 42 64 / 95%);
    --surface-inset: rgb(0 0 0 / 30%);
    --surface-locked: rgb(20 30 48 / 50%);
    --surface-hover: rgb(255 255 255 / 5%);
    --surface-ground: #0e1528;

    /* Text (inverted) */
    --color-text: var(--color-pearl, #e9eef8);
    --color-text-muted: #a0aec0;
    --text-primary: var(--color-pearl);
    --text-secondary: #a0aec0;
    --text-muted: #718096;

    /* Primary (adjusted for dark) */
    --color-primary: #5ea8ff;
    --color-primary-light: #7eb8ff;
    --color-primary-dark: #3d8aed;

    /* Accent */
    --color-accent: #e6a817;
    --color-accent-light: #f0c04a;
    --color-accent-dark: #c88c00;

    /* Borders */
    --border-subtle: rgb(255 255 255 / 10%);
    --border-default: rgb(255 255 255 / 15%);
    --border-strong: rgb(255 255 255 / 25%);

    /* Shadows (glow instead of drop) */
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 50%);
    --shadow-md: 0 4px 24px rgb(0 0 0 / 60%);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 70%);
    --shadow-xl: 0 24px 64px rgb(0 0 0 / 80%);
    --shadow-glow-primary: 0 0 40px rgb(94 168 255 / 30%);
    --shadow-glow-accent: 0 0 40px rgb(230 168 23 / 25%);
    --shadow-soft: 0 18px 40px rgb(0 0 0 / 30%);

    /* Section flow tokens — dark equivalents for alternating sections */
    --section-light-a: #0e1528;
    --section-light-b: #141e30;
    --section-light-c: #1a2640;
    --color-bg: #0e1528;
    --color-neutral: #141e30;

    /* Glass layer tokens */
    --glass-bg: rgb(20 30 48 / 55%);
    --glass-bg-strong: rgb(20 30 48 / 76%);
    --glass-border: rgb(255 255 255 / 12%);
    --glass-shadow: var(--shadow-md), inset 0 1px 0 rgb(255 255 255 / 6%);

    /* Computed surfaces */
    --surface-muted: color-mix(in srgb, var(--color-primary) 10%, #0e1528);

    /* Component alias overrides */
    --ev-bg: #0e1528;
    --ev-bg-alt: #141e30;
    --ev-bg-warm: #1a2640;
    --ev-bg-card: #141e30;
    --ev-border: rgb(255 255 255 / 15%);
    --ev-border-hover: rgb(255 255 255 / 25%);
    --ev-text: var(--color-pearl, #e9eef8);
    --ev-text-secondary: #a0aec0;
    --ev-text-muted: #718096;
    --ev-text-inverse: #1a2040;

    /* Footer-compatible aliases */
    --color-surface: #0e1528;
    --color-border: rgb(255 255 255 / 12%);
    --color-text-primary: #e9eef8;
    --color-text-secondary: #a0aec0;
    --color-subtle-bg: #1a2640;

    /* Loading skeleton */
    --loading-skeleton-base: #1a2332;
    --loading-skeleton-shine: #253042;

    /* Status colors */
    --status-success: #4ade80;
    --status-error: #f87171;
    --status-warning: #fbbf24;
    --status-info: #60a5fa;

    /* Body background override */
    --body-bg: var(--color-obsidian);
    --body-gradient-1: color-mix(in srgb, var(--color-sapphire) 12%, transparent);
    --body-gradient-2: color-mix(in srgb, var(--color-gold) 10%, transparent);
    --body-gradient-3: color-mix(in srgb, var(--color-labradorite) 8%, transparent);
  }
}

/* Manual dark mode toggle (data attribute) */
[data-theme="dark"] {
  /* Same as above - copy of dark mode vars */
  --surface-base: var(--color-obsidian, #0e1528);
  --surface-card: rgb(20 30 48 / 90%);
  --surface-card-solid: #141e30;
  --surface-elevated: rgb(30 42 64 / 95%);
  --surface-inset: rgb(0 0 0 / 30%);
  --surface-locked: rgb(20 30 48 / 50%);
  --surface-hover: rgb(255 255 255 / 5%);
  --surface-ground: #0e1528;
  --color-text: var(--color-pearl, #e9eef8);
  --color-text-muted: #a0aec0;
  --text-primary: var(--color-pearl);
  --text-secondary: #a0aec0;
  --text-muted: #718096;
  --color-primary: #5ea8ff;
  --color-primary-light: #7eb8ff;
  --color-primary-dark: #3d8aed;
  --color-accent: #e6a817;
  --color-accent-light: #f0c04a;
  --color-accent-dark: #c88c00;
  --border-subtle: rgb(255 255 255 / 10%);
  --border-default: rgb(255 255 255 / 15%);
  --border-strong: rgb(255 255 255 / 25%);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 50%);
  --shadow-md: 0 4px 24px rgb(0 0 0 / 60%);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 70%);
  --shadow-xl: 0 24px 64px rgb(0 0 0 / 80%);
  --shadow-glow-primary: 0 0 40px rgb(94 168 255 / 30%);
  --shadow-glow-accent: 0 0 40px rgb(230 168 23 / 25%);
  --shadow-soft: 0 18px 40px rgb(0 0 0 / 30%);
  --section-light-a: #0e1528;
  --section-light-b: #141e30;
  --section-light-c: #1a2640;
  --color-bg: #0e1528;
  --color-neutral: #141e30;
  --glass-bg: rgb(20 30 48 / 55%);
  --glass-bg-strong: rgb(20 30 48 / 76%);
  --glass-border: rgb(255 255 255 / 12%);
  --glass-shadow: var(--shadow-md), inset 0 1px 0 rgb(255 255 255 / 6%);
  --surface-muted: color-mix(in srgb, var(--color-primary) 10%, #0e1528);
  --ev-bg: #0e1528;
  --ev-bg-alt: #141e30;
  --ev-bg-warm: #1a2640;
  --ev-bg-card: #141e30;
  --ev-border: rgb(255 255 255 / 15%);
  --ev-border-hover: rgb(255 255 255 / 25%);
  --ev-text: var(--color-pearl, #e9eef8);
  --ev-text-secondary: #a0aec0;
  --ev-text-muted: #718096;
  --ev-text-inverse: #1a2040;
  --color-surface: #0e1528;
  --color-border: rgb(255 255 255 / 12%);
  --color-text-primary: #e9eef8;
  --color-text-secondary: #a0aec0;
  --color-subtle-bg: #1a2640;
  --loading-skeleton-base: #1a2332;
  --loading-skeleton-shine: #253042;
  --status-success: #4ade80;
  --status-error: #f87171;
  --status-warning: #fbbf24;
  --status-info: #60a5fa;
  --body-bg: var(--color-obsidian);
  --body-gradient-1: color-mix(in srgb, var(--color-sapphire) 12%, transparent);
  --body-gradient-2: color-mix(in srgb, var(--color-gold) 10%, transparent);
  --body-gradient-3: color-mix(in srgb, var(--color-labradorite) 8%, transparent);
}

/* ── Dark Mode Body Override ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    background-color: var(--body-bg);
    background-image:
      radial-gradient(ellipse 1300px 760px at -10% -20%, var(--body-gradient-1), transparent 62%),
      radial-gradient(ellipse 1160px 700px at 112% -16%, var(--body-gradient-2), transparent 58%),
      radial-gradient(ellipse 980px 620px at 52% 112%, var(--body-gradient-3), transparent 66%),
      linear-gradient(158deg, #0e1528 0%, #111827 54%, #0e1528 100%);
    color: var(--color-text);
  }
}

[data-theme="dark"] body {
  background-color: var(--body-bg);
  background-image:
    radial-gradient(ellipse 1300px 760px at -10% -20%, var(--body-gradient-1), transparent 62%),
    radial-gradient(ellipse 1160px 700px at 112% -16%, var(--body-gradient-2), transparent 58%),
    radial-gradient(ellipse 980px 620px at 52% 112%, var(--body-gradient-3), transparent 66%),
    linear-gradient(158deg, #0e1528 0%, #111827 54%, #0e1528 100%);
  color: var(--color-text);
}

/* ── Dark Mode Component Fixes ──────────────────────────────── */

/* Images */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img:not([src*="logo"], [src*="brand"]) {
    opacity: 0.9;
  }
}

[data-theme="dark"] img:not([src*="logo"], [src*="brand"]) {
  opacity: 0.9;
}

/* Code blocks */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) code,
  :root:not([data-theme="light"]) pre {
    background: #1a2332;
    color: #e9eef8;
  }
}

[data-theme="dark"] code,
[data-theme="dark"] pre {
  background: #1a2332;
  color: #e9eef8;
}

/* Selection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::selection {
    background: rgb(94 168 255 / 30%);
    color: #fff;
  }
}

[data-theme="dark"] ::selection {
  background: rgb(94 168 255 / 30%);
  color: #fff;
}

/* Scrollbar */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    scrollbar-color: #3d4f6f #1a2332;
  }

  :root:not([data-theme="light"]) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  :root:not([data-theme="light"]) ::-webkit-scrollbar-track {
    background: #1a2332;
  }

  :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
    background: #3d4f6f;
    border-radius: 5px;
  }

  :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
    background: #4d5f7f;
  }
}

[data-theme="dark"] {
  scrollbar-color: #3d4f6f #1a2332;
}

[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1a2332;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3d4f6f;
  border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4d5f7f;
}

/* ── Dark Mode Toggle Button ──────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.theme-toggle__icon--sun,
.theme-toggle__icon--moon {
  width: 20px;
  height: 20px;
}

/* Hide/show based on current theme */
[data-theme="dark"] .theme-toggle__icon--sun,
[data-theme="light"] .theme-toggle__icon--moon,
.theme-toggle__icon--moon {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle__icon--moon {
    display: block;
  }
}

/* ── High Contrast Mode Support ──────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --border-subtle: rgb(255 255 255 / 30%);
    --border-default: rgb(255 255 255 / 50%);
    --border-strong: rgb(255 255 255 / 70%);
  }

  .btn:focus-visible,
  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    outline: 3px solid currentcolor;
    outline-offset: 2px;
  }
}