/* Dark Theme - CI Blue */
:root {
  /* Background colors — derived from defuss dark: background / card / secondary */
  --bg-primary: oklch(0.228 0.082 270.545);
  --bg-secondary: oklch(0.27 0.07 268);
  --bg-tertiary: oklch(0.31 0.06 265);
  --bg-surface: oklch(0.27 0.07 268 / 80%);
  --bg-glass: oklch(0.27 0.07 268 / 60%);

  /* Text colors — foreground / muted-foreground */
  --text-primary: oklch(0.929 0.013 255.561);
  --text-secondary: oklch(0.711 0.035 256.803);
  --text-muted: oklch(0.711 0.035 256.803 / 70%);

  /* Accent colors — primary (#7dd3fc sky-blue) / ring */
  --accent-primary: oklch(0.753 0.139 232.679);
  --accent-secondary: oklch(0.588 0.139 241.978);
  --accent-glow: oklch(0.753 0.139 232.679 / 50%);
  --accent-subtle: oklch(0.753 0.139 232.679 / 15%);

  /* Status colors */
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.4);
  --danger: oklch(0.711 0.166 22.201);
  --danger-glow: oklch(0.711 0.166 22.201 / 40%);
  --warning: #f59e0b;
  --processing: #a855f7;
  --processing-glow: rgba(168, 85, 247, 0.4);

  /* Shadows and effects */
  --shadow-color: rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px var(--accent-glow);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-hard: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* Glass morphism */
  --glass-border: oklch(1 0 0 / 10%);
  --glass-highlight: oklch(1 0 0 / 5%);

  /* Grid background */
  --grid-color: oklch(0.753 0.139 232.679 / 3%);
  --grid-line: oklch(0.753 0.139 232.679 / 8%);

  /* Button specific */
  --btn-bg: linear-gradient(145deg, oklch(0.31 0.06 265), oklch(0.228 0.082 270.545));
  --btn-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4), -4px -4px 12px oklch(0.31 0.06 265 / 30%);
  --btn-shadow-inset: inset 6px 6px 12px rgba(0, 0, 0, 0.3), inset -4px -4px 10px oklch(0.31 0.06 265 / 20%);

  /* Voice button ring - default (cyan accent) */
  --holo-ring: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--accent-primary) 30deg,
    var(--accent-secondary) 60deg,
    transparent 120deg,
    transparent 180deg,
    var(--accent-secondary) 210deg,
    var(--accent-primary) 240deg,
    transparent 300deg,
    transparent 360deg
  );

  /* Danger ring (recording) - red */
  --holo-ring-danger: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--danger) 30deg,
    #ff6b6b 60deg,
    transparent 120deg,
    transparent 180deg,
    #ff6b6b 210deg,
    var(--danger) 240deg,
    transparent 300deg,
    transparent 360deg
  );

  /* Processing ring (waiting) - purple */
  --holo-ring-processing: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--processing) 30deg,
    #c084fc 60deg,
    transparent 120deg,
    transparent 180deg,
    #c084fc 210deg,
    var(--processing) 240deg,
    transparent 300deg,
    transparent 360deg
  );

  /* Success ring (playing) - green */
  --holo-ring-success: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--success) 30deg,
    #34d399 60deg,
    transparent 120deg,
    transparent 180deg,
    #34d399 210deg,
    var(--success) 240deg,
    transparent 300deg,
    transparent 360deg
  );

  /* Input fields */
  --input-bg: oklch(0.228 0.082 270.545 / 80%);
  --input-border: oklch(0.753 0.139 232.679 / 20%);
  --input-focus: oklch(0.753 0.139 232.679 / 40%);
}

/* Dark theme background effects */
[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.753 0.139 232.679 / 12%) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 100%, oklch(0.588 0.139 241.978 / 8%) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Glowing elements */
[data-theme="dark"] .glow-accent {
  box-shadow: 0 0 20px var(--accent-glow), 0 0 40px oklch(0.753 0.139 232.679 / 20%);
}

[data-theme="dark"] .glow-text {
  text-shadow: 0 0 10px var(--accent-glow), 0 0 20px oklch(0.753 0.139 232.679 / 30%);
}

/* Settings panel glass effect */
[data-theme="dark"] .settings-panel {
  background: linear-gradient(135deg, oklch(0.27 0.07 268 / 95%) 0%, oklch(0.228 0.082 270.545 / 98%) 100%);
  border-right: 1px solid var(--glass-border);
}

/* Dark scrollbar (WebKit only) */
@supports (-webkit-appearance: none) {
  [data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
  }

  [data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
  }

  [data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--accent-subtle);
    border-radius: 3px;
  }

  [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-glow);
  }
}