/*
 * ECS Lyon - tokens de design
 * ---------------------------------------------------------------
 * Source : maquette "Accueil ECS Lyon v4" (couleurs, polices, rayons).
 * Toutes les valeurs de couleur, de rayon et d'ombre sont ici.
 * Les autres feuilles (style.css, components.css) ne doivent
 * utiliser que ces variables, jamais de couleur en dur.
 *
 * Thème clair par défaut. Thème sombre : suit la préférence système
 * (prefers-color-scheme), ou forcé par l'attribut data-theme sur <html>
 * (data-theme="dark" ou data-theme="light").
 *
 * Règle d'accessibilité : le jaune (--ecs-yellow) ne porte jamais seul
 * une information et n'est jamais une couleur de texte sur fond blanc.
 */

:root {
  /* Marque : violet dominant, jaune en accent */
  --ecs-violet: #36096A;
  --ecs-violet-900: #24053f;
  --ecs-violet-700: #4b1586;
  --ecs-violet-600: #5a2a94;
  --ecs-violet-500: #6b3fa6;
  --ecs-yellow: #FFD100;
  --ecs-yellow-hover: #ffdc3d;

  /* Encres (texte) sur fond clair */
  --ecs-ink: #2a1d3d;
  --ecs-ink-muted: #5b4d6e;
  --ecs-ink-soft: #7a6a8f;

  /* Surfaces claires */
  --ecs-white: #fff;
  --ecs-lilac-100: #ece6f3;
  --ecs-lilac-050: #f4effa;
  --ecs-surface-alt: #f7f4fb;

  /* Rôles sémantiques (utilisés par les composants) */
  --ecs-bg: #fff;
  --ecs-surface: #fff;
  --ecs-border: #ece6f3;
  --ecs-border-strong: #d9cce9;
  --ecs-text: var(--ecs-ink);
  --ecs-text-muted: var(--ecs-ink-muted);
  --ecs-heading: var(--ecs-violet);
  --ecs-link: var(--ecs-violet);
  --ecs-link-hover: var(--ecs-violet-700);

  /* Texte sur fonds colorés */
  --ecs-on-violet: #fff;
  --ecs-on-violet-muted: #e9e1f3;
  --ecs-on-violet-soft: #cdbfe0;
  --ecs-on-yellow: #24053f;
  --ecs-on-yellow-muted: #3a2a4f;

  /* Pied de page (fond violet très foncé) */
  --ecs-footer-bg: #24053f;
  --ecs-footer-text: #d9cfe6;
  --ecs-footer-text-soft: #b9aacb;
  --ecs-footer-line: #3d1b62;

  /* Focus visible (RGAA) */
  --ecs-focus: #FFD100;

  /* Formes */
  --ecs-radius-xs: 8px;
  --ecs-radius-sm: 12px;
  --ecs-radius-md: 18px;
  --ecs-radius-lg: 22px;
  --ecs-radius-xl: 28px;
  --ecs-radius-pill: 999px;

  /* Ombres */
  --ecs-shadow-card: 0 10px 30px -12px rgba(36, 5, 63, .28);
  --ecs-shadow-lift: 0 24px 40px -20px rgba(36, 5, 63, .35);
  --ecs-shadow-panel: 0 40px 80px -40px rgba(36, 5, 63, .5);

  /* Polices (Google Fonts, chargées dans functions.php) */
  --ecs-font-title: Lexend, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ecs-font-body: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ecs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle de texte (mobile-first, les titres grandissent avec clamp) */
  --ecs-text-xs: 12px;
  --ecs-text-sm: 14px;
  --ecs-text-base: 16px;
  --ecs-text-lg: 19px;
  --ecs-text-xl: 20px;
  --ecs-h1: clamp(34px, 4.6vw, 56px);
  --ecs-h2: clamp(28px, 3.2vw, 40px);
  --ecs-h3: 22px;

  /* Espacements */
  --ecs-gutter: 16px;
  --ecs-gutter-md: 24px;
  --ecs-section-y: 72px;
  --ecs-section-y-lg: 96px;
  --ecs-container: 1240px;

  /* Mouvement (désactivé par prefers-reduced-motion dans components.css) */
  --ecs-ease: cubic-bezier(.2, .8, .2, 1);
  --ecs-duration: .3s;
}

/* Thème sombre : uniquement si demandé par data-theme="dark" (le site reste clair par défaut, comme la maquette) */
@media all {
  :root[data-theme="dark"] {
    --ecs-bg: #140a1e;
    --ecs-surface: #1d1129;
    --ecs-surface-alt: #1a0f26;
    --ecs-lilac-050: #241637;
    --ecs-lilac-100: #3a2a52;
    --ecs-border: #3a2a52;
    --ecs-border-strong: #5a4478;
    --ecs-ink: #f1ecf7;
    --ecs-ink-muted: #cfc3e0;
    --ecs-ink-soft: #b3a4c9;
    --ecs-text: #f1ecf7;
    --ecs-text-muted: #cfc3e0;
    --ecs-heading: #e4d4ff;
    --ecs-link: #e4d4ff;
    --ecs-link-hover: #fff;
    --ecs-footer-bg: #0c0412;
    --ecs-violet-700: #5a2a94;
    --ecs-shadow-card: 0 10px 30px -12px rgba(0, 0, 0, .6);
    --ecs-shadow-lift: 0 24px 40px -20px rgba(0, 0, 0, .7);
    --ecs-shadow-panel: 0 40px 80px -40px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  --ecs-bg: #140a1e;
  --ecs-surface: #1d1129;
  --ecs-surface-alt: #1a0f26;
  --ecs-lilac-050: #241637;
  --ecs-lilac-100: #3a2a52;
  --ecs-border: #3a2a52;
  --ecs-border-strong: #5a4478;
  --ecs-ink: #f1ecf7;
  --ecs-ink-muted: #cfc3e0;
  --ecs-ink-soft: #b3a4c9;
  --ecs-text: #f1ecf7;
  --ecs-text-muted: #cfc3e0;
  --ecs-heading: #e4d4ff;
  --ecs-link: #e4d4ff;
  --ecs-link-hover: #fff;
  --ecs-footer-bg: #0c0412;
  --ecs-violet-700: #5a2a94;
  --ecs-shadow-card: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --ecs-shadow-lift: 0 24px 40px -20px rgba(0, 0, 0, .7);
  --ecs-shadow-panel: 0 40px 80px -40px rgba(0, 0, 0, .8);
}