/**
 * Theme System - Light and Dark Mode
 * Uses CSS custom properties for easy theme switching
 */

:root {
  /* Colors - Light Theme (Default) */
  --color-primary: #b388ff;
  --color-primary-dark: #9d6fff;
  --color-primary-light: #dcc9ff;
  --color-accent: #ff6f61;
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;

  /* Backgrounds */
  --bg-gradient-start: #ffe9a3;
  --bg-gradient-end: #fef6d9;
  --bg-card: #ffffff;
  --bg-card-hover: #f9f9f9;
  --bg-input: #f3f0ff;
  --bg-settings: rgba(255, 255, 255, 0.98);

  /* Text colors */
  --text-primary: #2d2a44;
  --text-secondary: #4f4a6d;
  --text-tertiary: #6c648a;
  --text-heading: #3b3656;
  --text-on-primary: #ffffff;

  /* Borders */
  --border-light: #d9d4ff;
  --border-medium: #c5bfef;
  --border-focus: #5f6fff;

  /* Shadows */
  --shadow-sm: 0 4px 8px rgba(45, 42, 68, 0.08);
  --shadow-md: 0 8px 16px rgba(179, 136, 255, 0.2);
  --shadow-lg: 0 12px 24px rgba(45, 42, 68, 0.1);
  --shadow-primary: 0 6px 14px rgba(179, 136, 255, 0.3);

  /* UI Elements */
  --timer-color: #b388ff;
  --correct-color: #4caf50;
  --incorrect-color: #f44336;
}

/* Dark Theme */
[data-theme="dark"] {
  /* Colors adjusted for dark mode - Purple/magenta to match theme */
  --color-primary: #c9a0ff;
  --color-primary-dark: #b388ff;
  --color-primary-light: #5a5478;
  --color-accent: #ff9485;
  --color-success: #72d677;
  --color-warning: #ffb84d;
  --color-error: #ff6b6b;

  /* Backgrounds - Warmer and richer purple-gray tones */
  --bg-gradient-start: #1e1a2e;
  --bg-gradient-end: #2d2640;
  --bg-card: #332d4a;
  --bg-card-hover: #3d3555;
  --bg-input: #3d3555;
  --bg-settings: rgba(51, 45, 74, 0.98);

  /* Text colors - Improved contrast and hierarchy */
  --text-primary: #f0eef8;
  --text-secondary: #d0cce0;
  --text-tertiary: #b0aac5;
  --text-heading: #f8f7fc;
  --text-on-primary: #faf8ff;

  /* Borders - More visible but subtle */
  --border-light: #4f4968;
  --border-medium: #635d7d;
  --border-focus: #c9a0ff;

  /* Shadows - Softer with color tinting for depth */
  --shadow-sm: 0 4px 8px rgba(20, 16, 32, 0.4);
  --shadow-md: 0 8px 16px rgba(20, 16, 32, 0.5), 0 2px 8px rgba(201, 160, 255, 0.08);
  --shadow-lg: 0 12px 24px rgba(20, 16, 32, 0.6), 0 4px 12px rgba(201, 160, 255, 0.1);
  --shadow-primary: 0 6px 14px rgba(201, 160, 255, 0.4), 0 2px 6px rgba(201, 160, 255, 0.25);

  /* UI Elements */
  --timer-color: #c9a0ff;
  --correct-color: #72d677;
  --incorrect-color: #ff6b6b;
}

/* Apply theme colors to body */
body {
  background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
  color: var(--text-primary);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Smooth transitions for theme changes */
[data-theme] * {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Exclude animations and timers from theme transitions */
[data-theme] .flashcard__timer,
[data-theme] .flashcard__card--correct,
[data-theme] .flashcard__card--incorrect {
  transition: width 0.05s linear, transform 0.2s ease, box-shadow 0.2s ease !important;
}