/* ==========================================================================
   css/tokens.css — Système de Design & Tokens (3 Thèmes : Ichika, Lusamine, Diantha)
   Aucune couleur hex/rgb/rgba n'est autorisée en dehors de ce fichier.
   ========================================================================== */

:root {
  /* Typographie & Échelle */
  --font-sans: 'Plus Jakarta Sans', 'Inter', 'Nunito', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;

  /* Rayons de courbure — Plus doux et moins "grosse pilule" sur les inputs */
  --radius-shell: 34px;
  --radius-card: 22px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  /* Espacements aérés comme sur les inspis */
  --gap-grid: 24px;
  --pad-card: 22px;
  --pad-shell: 28px;

  /* Transitions */
  --transition-theme: 300ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-smooth: 240ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Statuts Universels (plus doux, moins fluo) */
  --status-online: #34d399;
  --status-warning: #fbbf24;
  --status-danger: #f87171;
  --status-online-glow: rgba(52, 211, 153, 0.25);
}

/* ==========================================================================
   1. THÈME ICHIKA (Fidèle à l'inspi 2 : Brume ardoise/lavande, zéro bordure, doux)
   ========================================================================== */
html[data-theme="ichika"] {
  --theme-mode: light;

  /* Arrière-plan & Shell (Sans boîte en Layout A, flotte librement !) */
  --bg: #eef1f7;
  --bg-gradient: linear-gradient(135deg, #eff2f9 0%, #e9edf5 50%, #f2eff6 100%);
  --shell-bg: transparent;
  --shell-border: transparent;
  --shell-shadow: none;

  /* Barre du haut (Gris-ardoise profond exactement comme l'inspi 2) */
  --topbar-bg: #353b49;
  --topbar-text: #f3f5f9;
  --topbar-muted: #9aa3b5;
  --topbar-slider: rgba(255, 255, 255, 0.18);

  /* Sidebar Pilule Flottante (Gris-bleuté doux comme l'inspi 2) */
  --sidebar-bg: #dce1ec;
  --sidebar-border: transparent;
  --sidebar-shadow: 0 10px 28px rgba(53, 59, 73, 0.05);
  --sidebar-item-hover: rgba(88, 98, 122, 0.1);
  --sidebar-item-active-bg: #4f586b;
  --sidebar-item-active-color: #ffffff;
  --sidebar-item-color: #697386;

  /* Cartes & Surfaces (Blanc pur sans bordure posé sur le fond brume) */
  --surface: #ffffff;
  --surface-alt: #f7f9fc;
  --surface-hover: #ffffff;
  --card-border: transparent;
  --card-shadow: 0 8px 24px rgba(53, 59, 73, 0.035);
  --card-shadow-hover: 0 14px 32px rgba(53, 59, 73, 0.07);
  --glass-blur: 0px;

  /* Typographie */
  --text: #2b303c;
  --muted: #6e778a;
  --subtle: #9aa3b5;

  /* Accents & Boutons (Ardoise doux + touche rose pastel Ichika) */
  --accent: #5c667a;
  --accent-hover: #495264;
  --accent-2: #d66b8a;
  --accent-2-hover: #c05675;
  --accent-contrast: #ffffff;
  --grad: linear-gradient(135deg, #5c667a 0%, #768299 100%);
  --accent-glow: rgba(92, 102, 122, 0.15);

  /* Éléments interactifs (Barre de recherche grise douce comme l'inspi 2) */
  --input-bg: #dfe4ef;
  --input-border: transparent;
  --input-focus-border: #8c96ab;
  --chip-bg: #e3e7f1;
  --chip-color: #5c667a;
  --chip-active-bg: #5c667a;
  --chip-active-color: #ffffff;
  --track-bg: #dfe4ef;

  /* Spécifique Hero & Météo */
  --hero-card-bg: #ffffff;
  --hero-drop-shadow: drop-shadow(0 12px 20px rgba(53, 59, 73, 0.12));
  --weather-bg: #ffffff;
}

/* ==========================================================================
   2. THÈME LUSAMINE (Fidèle à l'inspi 1 Pekora : Cadre blanc, Bleu ciel & Pêche pastel)
   ========================================================================== */
html[data-theme="lusamine"] {
  --theme-mode: light;

  /* Arrière-plan & Shell — Fond bleu ciel extérieur + Grand cadre blanc doux */
  --bg: #bae6fd;
  --bg-gradient: linear-gradient(135deg, #a5f3fc 0%, #bae6fd 50%, #e0f2fe 100%);
  --shell-bg: #f5f9ff;
  --shell-border: rgba(255, 255, 255, 0.9);
  --shell-shadow: 0 24px 60px rgba(14, 116, 144, 0.12);

  /* Barre du haut */
  --topbar-bg: #27303f;
  --topbar-text: #f8fafc;
  --topbar-muted: #94a3b8;
  --topbar-slider: rgba(255, 255, 255, 0.15);

  /* Sidebar Blanche Arrondie avec Labels (Fond intégré comme Pekora) */
  --sidebar-bg: #ffffff;
  --sidebar-border: transparent;
  --sidebar-shadow: 0 10px 26px rgba(56, 189, 248, 0.06);
  --sidebar-item-hover: rgba(56, 189, 248, 0.1);
  --sidebar-item-active-bg: linear-gradient(135deg, #67e8f9 0%, #38bdf8 100%);
  --sidebar-item-active-color: #ffffff;
  --sidebar-item-color: #475569;

  /* Cartes & Surfaces (Blanc pur sans bordure, ombres bleutées ultra douces) */
  --surface: #ffffff;
  --surface-alt: #f0f7ff;
  --surface-hover: #ffffff;
  --card-border: transparent;
  --card-shadow: 0 10px 28px rgba(56, 189, 248, 0.07);
  --card-shadow-hover: 0 16px 36px rgba(56, 189, 248, 0.13);
  --glass-blur: 10px;

  /* Typographie */
  --text: #1e293b;
  --muted: #64748b;
  --subtle: #94a3b8;

  /* Accents & Boutons — Bleu ciel Pekora & Orange Pêche doux */
  --accent: #38bdf8;
  --accent-hover: #0ea5e9;
  --accent-2: #fb923c;
  --accent-2-hover: #f97316;
  --accent-gold: #fdba74;
  --accent-contrast: #ffffff;
  --grad: linear-gradient(135deg, #fbbf24 0%, #fb923c 100%);
  --accent-glow: rgba(56, 189, 248, 0.22);

  /* Éléments interactifs */
  --input-bg: #ffffff;
  --input-border: transparent;
  --input-focus-border: #38bdf8;
  --chip-bg: #e0f2fe;
  --chip-color: #0284c7;
  --chip-active-bg: linear-gradient(135deg, #fdba74 0%, #fb923c 100%);
  --chip-active-color: #ffffff;
  --track-bg: #e0f2fe;

  /* Spécifique Hero & Météo */
  --hero-card-bg: #ffffff;
  --hero-drop-shadow: drop-shadow(0 14px 24px rgba(56, 189, 248, 0.16));
  --weather-bg: #ffffff;
}

/* ==========================================================================
   3. THÈME DIANTHA (Dark Mode Velours : Sans bordures dures, Or Champagne doux)
   ========================================================================== */
html[data-theme="diantha"] {
  --theme-mode: dark;

  /* Arrière-plan & Shell (Sans boîte en Layout A pour garder la pureté de l'inspi 2 !) */
  --bg: #11131a;
  --bg-gradient:
    radial-gradient(circle at 15% 15%, rgba(212, 163, 115, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(129, 140, 248, 0.06) 0%, transparent 45%),
    linear-gradient(145deg, #101218 0%, #141720 50%, #0f1117 100%);
  --shell-bg: transparent;
  --shell-border: transparent;
  --shell-shadow: none;

  /* Barre du haut */
  --topbar-bg: #1a1d27;
  --topbar-text: #f1f3f9;
  --topbar-muted: #7e869b;
  --topbar-slider: rgba(255, 255, 255, 0.08);

  /* Sidebar Pilule Flottante Sombre (Douce et sans bordure blanche dure) */
  --sidebar-bg: #1c202b;
  --sidebar-border: transparent;
  --sidebar-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  --sidebar-item-hover: rgba(255, 255, 255, 0.05);
  --sidebar-item-active-bg: #e2b878;
  --sidebar-item-active-color: #141720;
  --sidebar-item-color: #858da3;

  /* Cartes & Surfaces (Aplats velours #1c202b sur fond #11131a, ZÉRO bordure grise) */
  --surface: #1b1f2a;
  --surface-alt: #222736;
  --surface-hover: #252b3b;
  --card-border: transparent;
  --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  --card-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.32);
  --glass-blur: 16px;

  /* Typographie (Blanc cassé doux, jamais aveuglant) */
  --text: #eef0f6;
  --muted: #8b93a8;
  --subtle: #636b80;

  /* Accents & Boutons — Or Champagne / Ambre Pastel (Fini l'orange fluo !) */
  --accent: #e2b878;
  --accent-hover: #eac792;
  --accent-2: #6ee7b7;
  --accent-2-hover: #34d399;
  --accent-contrast: #141720;
  --grad: linear-gradient(135deg, #e7c590 0%, #d4a359 100%);
  --accent-glow: rgba(226, 184, 120, 0.16);

  /* Éléments interactifs */
  --input-bg: #222736;
  --input-border: transparent;
  --input-focus-border: rgba(226, 184, 120, 0.5);
  --chip-bg: #222736;
  --chip-color: #9aa2b8;
  --chip-active-bg: #e2b878;
  --chip-active-color: #141720;
  --track-bg: #252b3b;

  /* Spécifique Hero & Météo */
  --hero-card-bg: linear-gradient(135deg, #1f2432 0%, #1a1e29 100%);
  --hero-drop-shadow: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45));
  --weather-bg: #1b1f2a;
}