/**
 * tokens.css — ADPSA12 Design System v1.0
 *
 * Cadre §2.1 : Toutes les valeurs cosmétiques du site vivent ici.
 * Aucune couleur, espacement, taille de police ou ombre ne doit
 * apparaître en valeur littérale dans un autre fichier CSS.
 *
 * Charte graphique ADPSA12 :
 *  - Couleur primaire : vert sauge foncé (#0F6B63)
 *  - Couleur action   : rouge institutionnel (#D61C1C)
 *  - Typographie      : Verdana (corps), sans gras volontaire
 *  - Fond             : blanc pur / gris très clair (#F4F4F4)
 *  - Accent UI        : turquoise Digiforma (#00CBA9)
 */

:root {

    /* ── COULEURS ─────────────────────────────────────────────
       Nommage sémantique : role + nuance.
       Les nuances -light / -dark servent aux états hover/focus.
    ────────────────────────────────────────────────────────── */

    /* Vert primaire — couleur institutionnelle ADPSA12 */
    --color-primary:         #0F6B63;
    --color-primary-mid:     #006b4d;   /* Hover nav, éléments intermédiaires */
    --color-primary-dark:    #004d38;   /* Gradients hero, fonds sombres */
    --color-primary-teal:    #0a4d47;   /* Variante sombre */
    --color-primary-light:   #deecea;
    --color-primary-surface: #f0f7f6;
    --color-primary-alt:     #1a8a72;   /* Variante boutons hover */

    /* Rouge action — CTA secondaire, alertes */
    --color-action:          #D61C1C;
    --color-action-dark:     #b51515;
    --color-action-light:    #fff3e6;

    /* Turquoise Digiforma — sessions, badges disponibilité */
    --color-accent:          #00CBA9;
    --color-accent-btn:      #2dd4bf;   /* Bouton s'inscrire sessions */
    --color-accent-dark:     #0D9488;
    --color-accent-hover:    #14b8a6;
    --color-accent-surface:  #e0fbf6;

    /* Sémantiques */
    --color-success:         #27ae60;
    --color-warning:         #e07830;
    --color-error:           #f43f5e;
    --color-error-dark:      #b71c1c;
    --color-info:            #2980B9;
    --color-cpf:             #2563eb;

    /* Complet (sessions) */
    --color-complet:         #f43f5e;

    /* Neutres — échelle de gris */
    --color-neutral-slate:   #1e293b;   /* Titres modernes slate */
    --color-neutral-900:     #111111;   /* Texte principal */
    --color-neutral-800:     #1a1a1a;
    --color-neutral-700:     #444444;   /* Texte paragraphe */
    --color-neutral-600:     #475569;   /* Texte secondaire */
    --color-neutral-500:     #64748b;   /* Placeholder, icônes */
    --color-neutral-400:     #94a3b8;   /* Labels discrets */
    --color-neutral-300:     #cbd5e1;   /* Bordures légères */
    --color-neutral-200:     #e2e8f0;   /* Bordures cartes */
    --color-neutral-100:     #f8fafc;   /* Fond cartes */
    --color-neutral-50:      #F4F4F4;   /* Fond page */

    /* Couleurs secondaires / ponctuelles */
    --color-accent-purple:   #7d3c98;

    /* Fond */
    --color-bg-page:         #F4F4F4;
    --color-bg-white:        #FFFFFF;
    --color-bg-card:         #FFFFFF;
    --color-bg-section:      #f8fafc;
    --color-bg-hero:         #0F6B63;   /* Hero pages internes */


    /* ── TYPOGRAPHIE ──────────────────────────────────────────
       Famille unique : Verdana (charte client).
       Pas de gras dans Verdana — volontaire (charte §"Je ne
       veux pas du gras dans Verdana").
       Échelle modulaire ratio ≈ 1.25.
    ────────────────────────────────────────────────────────── */

    --font-family-base:      Verdana, Geneva, Tahoma, sans-serif;
    --font-family-serif:     Georgia, serif;   /* Usage ponctuel : citations */

    /* Tailles — mobile-first (clamp utilisé en context) */
    --font-size-xs:          12px;    /* Labels, badges */
    --font-size-sm:          14px;    /* Méta, légendes */
    --font-size-base:        18px;    /* Corps texte (charte) */
    --font-size-md:          20px;    /* Titres de section */
    --font-size-lg:          24px;    /* H3 */
    --font-size-xl:          28px;    /* H2 compact */
    --font-size-2xl:         36px;    /* H2 desktop */
    --font-size-3xl:         48px;    /* H1 desktop */

    /* Graisses — deux max par famille (charte) */
    --font-weight-normal:    normal;
    --font-weight-medium:    500;     /* Jamais bold dans Verdana */

    /* Hauteurs de ligne */
    --line-height-tight:     1.2;     /* Titres */
    --line-height-base:      1.5;     /* Corps */
    --line-height-relaxed:   1.7;     /* Texte long */

    /* Espacement lettres */
    --letter-spacing-tight:  -0.5px;  /* Titres (charte) */
    --letter-spacing-normal:  0;
    --letter-spacing-wide:    0.4px;   /* Badges, labels caps */


    /* ── ESPACEMENTS ──────────────────────────────────────────
       Échelle 4px × 2 (4, 8, 12, 16, 24, 32, 48, 64, 96).
       Cadre §2.2 : pas de valeur hors échelle.
    ────────────────────────────────────────────────────────── */

    --space-1:    4px;
    --space-2:    8px;
    --space-3:    12px;
    --space-4:    16px;
    --space-6:    24px;
    --space-8:    32px;
    --space-12:   48px;
    --space-16:   64px;
    --space-24:   96px;

    /* Aliases sémantiques */
    --space-card-padding:    var(--space-6);   /* Padding interne des cartes */
    --space-section-gap:     var(--space-12);  /* Espace entre sections */
    --space-form-gap:        var(--space-4);   /* Espace entre champs */


    /* ── RAYONS DE COIN ───────────────────────────────────────
       Cadre §2.1 --radius-*
    ────────────────────────────────────────────────────────── */

    --radius-none:   0;
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     16px;
    --radius-xl:     24px;
    --radius-full:   9999px;   /* Pills, badges */


    /* ── OMBRES ───────────────────────────────────────────────
       Usage parcimonieux (cadre §2.1).
    ────────────────────────────────────────────────────────── */

    --shadow-none: none;
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 10px 30px rgba(0, 0, 0, 0.10);

    /* État hover cartes */
    --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.10);


    /* ── DURÉES D'ANIMATION ───────────────────────────────────
       Cadre §2.1 --duration-*. Toutes les transitions utilisent
       ces valeurs. Pas d'animation décorative (cadre §4.2).
    ────────────────────────────────────────────────────────── */

    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   400ms;
    --easing-default:  ease;


    /* ── BREAKPOINTS ──────────────────────────────────────────
       Cadre §2.4 mobile-first : toutes les media queries en
       min-width uniquement.
    ────────────────────────────────────────────────────────── */

    --bp-sm:    640px;
    --bp-md:    768px;
    --bp-lg:    1024px;
    --bp-xl:    1280px;
    --bp-2xl:   1440px;


    /* ── MISE EN PAGE ─────────────────────────────────────────
       Valeurs globales de structure.
    ────────────────────────────────────────────────────────── */

    --max-width:         1200px;
    --header-height:     90px;

    /* Marges latérales contextuelles (remplacent les anciennes
       --margin-desktop / tablet / mobile) */
    --gutter-mobile:     var(--space-6);   /* 24px */
    --gutter-tablet:     var(--space-12);  /* 48px */
    --gutter-desktop:    0;               /* Container géré par max-width */


    /* ── COMPOSANTS SPÉCIFIQUES ───────────────────────────────
       Rétrocompatibilité : les variables historiques
       pointent vers les nouvelles.
    ────────────────────────────────────────────────────────── */

    /* Héritage des vars historiques (:root de style.css) */
    --primary-green:   var(--color-primary);
    --action-red:      var(--color-action);
    --text-black:      var(--color-neutral-900);
    --bg-light:        var(--color-bg-page);
    --bg-white:        var(--color-bg-white);
    --margin-mobile:   var(--gutter-mobile);
    --margin-tablet:   var(--gutter-tablet);
    --margin-desktop:  var(--gutter-desktop);
}