/* ============================================================
   tokens.css — Tokens globaux Portail Communal (mai 2026)
   Cohérent LABELS §13.2 acté Phase 3.
   Ces variables sont GÉNÉRIQUES (espacements, rayons, ombres, typo, transitions, breakpoints,
   couleurs système). Les variables COMMUNE-SPECIFIC (couleurs commune authentiques) sont
   définies par tenant dans theme-<commune>.css (cohérent §6.3 PROJECT injection serveur).
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     Espacements (8px base — cohérent LABELS §13.2)
     ---------------------------------------------------------- */
  --espacement-xs: 0.25rem;     /* 4px */
  --espacement-sm: 0.5rem;      /* 8px */
  --espacement-md: 1rem;        /* 16px */
  --espacement-lg: 1.5rem;      /* 24px */
  --espacement-xl: 2rem;        /* 32px */
  --espacement-xxl: 3rem;       /* 48px */
  --espacement-3xl: 4rem;       /* 64px */
  --espacement-4xl: 6rem;       /* 96px */

  /* ----------------------------------------------------------
     Rayons (anti carré flagrant + anti rond SaaS générique)
     ---------------------------------------------------------- */
  --rayon-sm: 4px;
  --rayon-md: 8px;
  --rayon-lg: 12px;
  --rayon-xl: 16px;
  --rayon-rond: 9999px;

  /* ----------------------------------------------------------
     Ombres (sobres institutionnelles — anti glassmorphism abusif)
     ---------------------------------------------------------- */
  --ombre-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ombre-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --ombre-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
  --ombre-xl: 0 20px 25px rgba(0, 0, 0, 0.10);
  --ombre-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --ombre-modal: 0 20px 50px rgba(0, 0, 0, 0.15);

  /* ----------------------------------------------------------
     Typographie — Sora imposée V1 (cohérent PROJECT §15.1)
     + JetBrains Mono pour code/ID techniques (ICC, hashs, codes)
     ---------------------------------------------------------- */
  --font-sora: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;

  /* Tailles texte (modulaire — minor third 1.2) */
  --texte-xs: 0.75rem;          /* 12px — micro labels */
  --texte-sm: 0.875rem;         /* 14px — secondaire */
  --texte-base: 1rem;           /* 16px — corps (minimum institutionnel) */
  --texte-lg: 1.125rem;         /* 18px — corps emphatique */
  --texte-xl: 1.25rem;          /* 20px — sous-titre */
  --texte-2xl: 1.5rem;          /* 24px — h3 */
  --texte-3xl: 1.875rem;        /* 30px — h2 */
  --texte-4xl: 2.25rem;         /* 36px — h1 */
  --texte-5xl: 3rem;            /* 48px — hero */

  /* Poids (Sora dispo : 100/200/300/400/500/600/700/800) */
  --poids-regular: 400;
  --poids-medium: 500;
  --poids-semibold: 600;
  --poids-bold: 700;
  --poids-extrabold: 800;

  /* Interlignages */
  --interligne-tight: 1.25;
  --interligne-normal: 1.5;
  --interligne-relaxed: 1.65;

  /* ----------------------------------------------------------
     Z-index (hiérarchie unique)
     ---------------------------------------------------------- */
  --z-bandeau-ticker: 50;
  --z-header-fixe: 100;
  --z-sidebar: 150;
  --z-dropdown: 200;
  --z-sticky-section: 300;
  --z-modal-backdrop: 1000;
  --z-modal: 1010;
  --z-toast: 2000;
  --z-tooltip: 3000;
  --z-popover: 1500;

  /* ----------------------------------------------------------
     Transitions (cubic-bezier elastic NT Piscines + standard alt)
     Cohérent nuance utilisateur Phase 4 Q6 + LABELS §13.2.
     ---------------------------------------------------------- */
  --transition-instant: 50ms ease;
  --transition-rapide: 150ms ease;
  --transition-standard: 200ms ease;           /* alt sobre — recommandé hover button */
  --transition-medium: 300ms ease;
  --transition-elastic: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);  /* NT Piscines — underline navbar, lightbox open */
  --transition-snap: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* alt cubic-bezier sobre */

  /* ----------------------------------------------------------
     Breakpoints (utilisés en JS pour matchMedia + container queries V2)
     Cohérent LABELS §13.2 — à valider via recherche web Phase 4 Q8.
     ---------------------------------------------------------- */
  --bp-mobile: 768px;
  --bp-tablette: 1024px;
  --bp-desktop: 1280px;
  --bp-large: 1536px;

  /* ----------------------------------------------------------
     Couleurs système (gris institutionnels — pas commune-specific)
     Échelle 50-900 standard. Calibrage WCAG AA garanti contraste sur fond clair.
     ---------------------------------------------------------- */
  --gris-50: #F9FAFB;
  --gris-100: #F3F4F6;
  --gris-200: #E5E7EB;
  --gris-300: #D1D5DB;
  --gris-400: #9CA3AF;
  --gris-500: #6B7280;
  --gris-600: #4B5563;
  --gris-700: #374151;
  --gris-800: #1F2937;
  --gris-900: #111827;

  /* Couleurs sémantiques universelles (constantes, hors thème commune) */
  --rouge-erreur: #DC2626;
  --rouge-erreur-bg: #FEE2E2;
  --rouge-erreur-border: #FECACA;
  --vert-succes: #16A34A;
  --vert-succes-bg: #DCFCE7;
  --vert-succes-border: #BBF7D0;
  --orange-alerte: #EA580C;
  --orange-alerte-bg: #FFEDD5;
  --orange-alerte-border: #FED7AA;
  --bleu-info: #2563EB;
  --bleu-info-bg: #DBEAFE;
  --bleu-info-border: #BFDBFE;

  /* Couleurs Vigilance Météo France (cohérent LABELS §13.3 + §8.7 COMPORTEMENTS) */
  --vigilance-vert: #00A651;
  --vigilance-jaune: #FFD500;
  --vigilance-orange: #FF6B00;
  --vigilance-rouge: #C8102E;

  /* ----------------------------------------------------------
     Variables structure de page (scaffolding mode sombre V2 ready)
     Cohérent Phase 4 Q5 — skin V1 clair uniquement, scaffolding ready.
     ---------------------------------------------------------- */
  --background-page: #FFFFFF;
  --background-section: var(--gris-50);
  --background-card: #FFFFFF;
  --background-elevated: #FFFFFF;
  --text-page: var(--gris-900);
  --text-secondaire: var(--gris-600);
  --text-muted: var(--gris-500);
  --text-inverse: #FFFFFF;
  --border-subtil: var(--gris-200);
  --border-fort: var(--gris-300);
  --border-focus: var(--commune-primary, var(--bleu-info));

  /* ----------------------------------------------------------
     Focus rings (cohérent RGAA 7.5 + WCAG 2.2 2.4.13 Focus Appearance AAA)
     Couleur héritée de --commune-primary (configurée par tenant)
     ---------------------------------------------------------- */
  --focus-ring-color: var(--commune-primary, var(--bleu-info));
  --focus-ring-offset: 2px;
  --focus-ring-width: 3px;
  --focus-ring: 0 0 0 var(--focus-ring-offset) var(--background-page),
                0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}

/* ============================================================
   Scaffolding mode sombre (V2) — prefers-color-scheme
   V1 : skin clair uniquement (cohérent Phase 4 Q5).
   Décommenter Phase 5+ pour activer skin sombre.
   ============================================================ */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --background-page: var(--gris-900);
    --background-section: var(--gris-800);
    --background-card: var(--gris-800);
    --background-elevated: var(--gris-700);
    --text-page: var(--gris-50);
    --text-secondaire: var(--gris-300);
    --text-muted: var(--gris-400);
    --border-subtil: var(--gris-700);
    --border-fort: var(--gris-600);
  }
}
*/