/* ========================================
   THEMES.CSS - Variables de thèmes
   ======================================== */

/* Mode Clair (Light Theme) - Par défaut */
:root {
  /* Couleurs principales */
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;

  /* Couleurs de fond */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;

  /* Texte */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;

  /* Bordures */
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;

  /* États */
  --success: #10b981;
  --success-light: #d1fae5;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --error: #ef4444;
  --error-light: #fee2e2;

  /* Ombres */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Dégradés */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-success: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-zen: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

  /* Typographie */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Poppins', var(--font-primary);

  /* Tailles de texte */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */

  /* Poids de police */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Hauteurs de ligne */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* Mode Sombre (Dark Theme) */
[data-theme="dark"] {
  /* Couleurs principales */
  --primary: #818cf8;
  --primary-light: #a5b4fc;
  --primary-dark: #6366f1;

  /* Couleurs de fond */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;

  /* Texte */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #64748b;

  /* Bordures */
  --border-color: #334155;
  --border-hover: #475569;

  /* États */
  --success: #34d399;
  --success-light: #064e3b;
  --warning: #fbbf24;
  --warning-light: #451a03;
  --error: #f87171;
  --error-light: #450a0a;

  /* Ombres (plus prononcées en dark) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);

  /* Dégradés ajustés pour dark mode */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-zen: linear-gradient(135deg, #0f766e 0%, #134e4a 100%);
}

/* Couleurs pour les habitudes (12 choix) */
.habit-colors {
  --habit-blue: #3b82f6;
  --habit-purple: #a855f7;
  --habit-pink: #ec4899;
  --habit-red: #ef4444;
  --habit-orange: #f97316;
  --habit-yellow: #eab308;
  --habit-green: #10b981;
  --habit-teal: #14b8a6;
  --habit-cyan: #06b6d4;
  --habit-indigo: #6366f1;
  --habit-violet: #8b5cf6;
  --habit-rose: #f43f5e;
}

/* Couleurs de la heatmap */
.heatmap-cell[data-level="0"] {
  background: var(--bg-tertiary);
}
.heatmap-cell[data-level="1"] {
  background: #d1fae5;
}
.heatmap-cell[data-level="2"] {
  background: #6ee7b7;
}
.heatmap-cell[data-level="3"] {
  background: #34d399;
}
.heatmap-cell[data-level="4"] {
  background: #10b981;
}

/* Heatmap dark mode adjustments */
[data-theme="dark"] .heatmap-cell[data-level="1"] {
  background: #064e3b;
}
[data-theme="dark"] .heatmap-cell[data-level="2"] {
  background: #065f46;
}
[data-theme="dark"] .heatmap-cell[data-level="3"] {
  background: #047857;
}
[data-theme="dark"] .heatmap-cell[data-level="4"] {
  background: #059669;
}

/* Transition de thème */
body {
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

* {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow;
  transition-duration: var(--transition-base);
  transition-timing-function: ease;
}

/* Éviter la transition sur les animations spécifiques */
.no-transition,
.no-transition * {
  transition: none !important;
}

/* Préférence système auto */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Apply dark theme variables when system preference is dark and theme is not explicitly set to light */
  }
}

/* Focus visible pour accessibilité */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Préférence de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Contraste élevé */
@media (prefers-contrast: high) {
  :root {
    --border-color: var(--text-primary);
  }

  .btn {
    border: 2px solid currentColor;
  }
}