/**
 * Grouvel Design System - Variables CSS
 * Ce fichier contient tous les tokens de design du site
 */

:root {
  /* === Couleurs primaires === */
  --color-primary: #007aff;
  --color-primary-hover: #005be8;
  --color-primary-light: rgba(0, 122, 255, 0.1);

  /* === Couleurs de texte === */
  --color-text-primary: #2b2d42;
  --color-text-secondary: #5a5a5a;
  --color-text-muted: #666;
  --color-text-disabled: #888;

  /* === Couleurs de fond === */
  --color-bg-gradient: radial-gradient(circle at 30% 20%, #dfe9f3 0%, #ffffff 100%);
  --color-bg-gradient-kids: radial-gradient(circle at 35% 20%, #f0f6ff 0%, #ffffff 100%);
  --color-bg-gradient-francais: radial-gradient(circle at 25% 20%, #f5f9ff 0%, #ffffff 75%);
  --color-bg-gradient-allemand: radial-gradient(circle at 30% 20%, #e8f4f8 0%, #ffffff 100%);
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f5f5;

  /* === Couleurs d'état === */
  --color-success: #0a7c28;
  --color-success-bg: #e8f5e9;
  --color-error: #b00020;
  --color-error-bg: #ffebee;

  /* === Couleurs des badges === */
  --badge-perso-bg: #e3f2fd;
  --badge-perso-text: #1565c0;
  --badge-enfants-bg: #fff3e0;
  --badge-enfants-text: #e65100;
  --badge-ecole-bg: #f3e5f5;
  --badge-ecole-text: #6a1b9a;
  --badge-divertissement-bg: #e8f5e9;
  --badge-divertissement-text: #2e7d32;

  /* === Couleurs temps verbaux (Francais) === */
  --tense-present: #00bcd4;
  --tense-imparfait: #ff9800;
  --tense-futur: #4caf50;
  --tense-passe-compose: #f44336;
  --tense-passe-simple: #9c27b0;

  /* === Couleurs cas grammaticaux (Allemand) === */
  --case-nominativ: #2196f3;
  --case-akkusativ: #f44336;
  --case-dativ: #4caf50;
  --case-genitiv: #9c27b0;

  /* === Couleurs thème Games (Matrix/Tron) === */
  --games-primary: #00ffcc;
  --games-primary-dim: #008877;
  --games-bg: #000000;
  --games-text: #b8fff2;
  --games-glow: rgba(0, 255, 204, 0.25);

  /* === Border radius - 4 valeurs standard === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* === Ombres === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 12px rgba(0, 122, 255, 0.3);

  /* === Transitions === */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* === Espacement === */
  --spacing-xs: 0.4em;
  --spacing-sm: 0.8em;
  --spacing-md: 1.5em;
  --spacing-lg: 2.5em;
  --spacing-xl: 3em;

  /* === Typographie === */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
  --font-family-games: 'Inter', 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --font-size-xs: 0.7rem;
  --font-size-sm: 0.9rem;
  --font-size-base: 1rem;
  --font-size-md: 1.1rem;
  --font-size-lg: 1.3rem;
  --font-size-xl: 1.8rem;
  --font-size-2xl: 2.7rem;

  /* === Breakpoints (pour documentation) === */
  /* Mobile: max-width: 640px */
  /* Tablet: min-width: 641px and max-width: 1024px */
  /* Desktop: min-width: 900px (grid 3 colonnes) */

  /* === Focus (accessibilite) === */
  --focus-ring-color: rgba(0, 122, 255, 0.85);
  --focus-ring-offset: 3px;

  /* === Bordures === */
  --border-light: 2px solid #e0e0e0;
  --border-primary: 2px solid var(--color-primary);
  --border-transparent: 2px solid transparent;
}

/* Dark mode pour les jeux */
:root[data-theme="games"],
.theme-games {
  color-scheme: dark;
}

/* Mode sombre automatique (preference systeme) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Couleurs de texte */
    --color-text-primary: #e8e8f0;
    --color-text-secondary: #b0b0b8;
    --color-text-muted: #8a8a95;
    --color-text-disabled: #606068;

    /* Couleurs de fond */
    --color-bg-gradient: radial-gradient(circle at 30% 20%, #1a1a2e 0%, #16213e 100%);
    --color-bg-gradient-kids: radial-gradient(circle at 35% 20%, #1a1f35 0%, #16213e 100%);
    --color-bg-gradient-francais: radial-gradient(circle at 25% 20%, #141a2e 0%, #16213e 75%);
    --color-bg-gradient-allemand: radial-gradient(circle at 30% 20%, #142025 0%, #16213e 100%);
    --color-bg-white: #1e1e2e;
    --color-bg-light: #252535;

    /* Couleurs d'etat */
    --color-success-bg: #1a3320;
    --color-error-bg: #3d1a1a;

    /* Couleurs des badges (ajustees pour fond sombre) */
    --badge-perso-bg: rgba(33, 150, 243, 0.2);
    --badge-perso-text: #64b5f6;
    --badge-enfants-bg: rgba(255, 152, 0, 0.2);
    --badge-enfants-text: #ffb74d;
    --badge-ecole-bg: rgba(156, 39, 176, 0.2);
    --badge-ecole-text: #ce93d8;
    --badge-divertissement-bg: rgba(76, 175, 80, 0.2);
    --badge-divertissement-text: #81c784;

    /* Ombres (plus subtiles en mode sombre) */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);

    /* Bordures */
    --border-light: 2px solid #3a3a4a;

    /* Focus */
    --focus-ring-color: rgba(100, 181, 246, 0.85);
  }
}