/* ============================================================================
   ERATO — DESIGN TOKENS (source de vérité unique)
   Identité : logo arbre + motif cercles, base crème/encre stable,
   accent SAISONNIER en gradient sur un axe de température (frais été → chaud hiver).
   Tous les contrastes texte sont validés WCAG AAA (≥ 7:1 sur crème).
   Les variables historiques (--couleur-*, --pub-*) DÉRIVENT de ces tokens
   (cf. bas de fichier) pour recolorer sans casser les composants existants.
   ============================================================================ */

/* ---------- Polices self-hosted (zéro CDN) ---------- */

/* Display / titres / wordmark / répertoire — Fraunces (serif chaleureux, OFL) */
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-400-italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-700-normal.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-900-normal.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}

/* Corps — Atkinson Hyperlegible (humaniste, distinction inter-lettres, AAA) */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* Alternates accessibilité (activées via html[data-font=...]) */
@font-face {
    font-family: 'Luciole';
    src: url('../fonts/Luciole-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Luciole';
    src: url('../fonts/Luciole-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================================
   :root — TOKENS DE MARQUE
   ============================================================================ */
:root {
    /* ---------- Familles typographiques ---------- */
    --font-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-corps: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ---------- Neutres (constantes de marque, stables toute l'année) ---------- */
    --creme:        #f5f0e8;  /* fond principal — papier chaud */
    --creme-ombre:  #ebe3d6;  /* fond alterné / creux */
    --papier:       #fdfbf7;  /* cartes, surfaces hautes */
    --encre:        #1a1410;  /* texte principal — 16.1:1 sur crème */
    --encre-douce:  #4a4038;  /* texte secondaire — ~8.6:1 sur crème */
    --ligne:        #d9cfbf;  /* bordures, filets */
    --ligne-forte:  #b9ac98;  /* bordures accentuées */

    /* ---------- Sémantiques (conservées, AAA) ---------- */
    --succes:       #0f5132;
    --succes-fond:  #e3f0e8;
    --erreur:       #842029;
    --erreur-fond:  #f7e1e1;
    --info:         #14506b;
    --info-fond:    #dfeef5;

    /* ---------- Accent SAISONNIER — défaut : HIVER (chaud, signature) ----------
       Redéfini par [data-saison="..."] plus bas. Quatre rôles :
       --accent       ton médian (icônes, filets, puces)
       --accent-2     fin de gradient (jamais support de texte)
       --accent-deep  TEXTE sur crème — toujours ≥ 7:1
       --accent-soft  teinte très claire — fond de bulle
       --accent-grad  gradient deux-tons (aplats, bulles, hero)               */
    --accent:       #b83055;
    --accent-2:     #c0395a;
    --accent-deep:  #8e2240;
    --accent-soft:  #f7dce3;
    --accent-grad:  linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    --accent-contraste: #ffffff; /* texte sur aplat d'accent — blanc, ≥ 4.5:1 */
    /* Fond d'accent STABLE pour les surfaces porteuses de texte (boutons,
       pastilles, CTA) : reste sombre en clair ET en sombre → blanc ≥ 7:1
       toujours. N'est PAS redéfini dans le bloc dark (donc ne s'inverse pas). */
    --accent-profond: #8e2240;

    /* ---------- Échelle typographique (clamp responsive) ---------- */
    --t-xs:   0.78rem;
    --t-sm:   0.875rem;
    --t-base: 1rem;
    --t-md:   1.125rem;
    --t-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --t-xl:   clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
    --t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem);
    --t-3xl:  clamp(2.6rem, 1.8rem + 3.8vw, 4.5rem);
    --lh-titre: 1.12;
    --lh-corps: 1.6;

    /* ---------- Espacements (baseline 8pt) ---------- */
    --esp-1: 0.25rem;  /* 4  */
    --esp-2: 0.5rem;   /* 8  */
    --esp-3: 0.75rem;  /* 12 */
    --esp-4: 1rem;     /* 16 */
    --esp-5: 1.5rem;   /* 24 */
    --esp-6: 2rem;     /* 32 */
    --esp-7: 3rem;     /* 48 */
    --esp-8: 4rem;     /* 64 */
    --esp-9: 6rem;     /* 96 */
    --esp-10: 8rem;    /* 128 */

    /* ---------- Rayons ---------- */
    --rayon-sm:   6px;
    --rayon-md:   12px;
    --rayon-lg:   24px;
    --rayon-full: 999px;

    /* ---------- Ombres (teintées encre chaude) ---------- */
    --ombre-sm: 0 1px 3px rgba(26, 20, 16, 0.10);
    --ombre-md: 0 6px 18px -6px rgba(26, 20, 16, 0.16);
    --ombre-lg: 0 24px 48px -20px rgba(26, 20, 16, 0.28);

    /* ---------- Bulles (motif signature — diamètres de référence) ---------- */
    --bulle-xs: 2.5rem;   /* 40px  — pastille date, badge */
    --bulle-sm: 6rem;     /* 96px  — avatar, vignette */
    --bulle-md: 16rem;    /* 256px — carte secondaire */
    --bulle-lg: 30rem;    /* 480px — hero, photo principale */
    --bulle-xl: 50rem;    /* 800px — décor de fond */

    /* ---------- Panneau « salle de concert » (toujours profond, ne s'inverse pas) ---------- */
    --panneau:        #1a1410;
    --panneau-texte:  #f3ece1;
    --panneau-texte-doux: #d0c8bc;

    /* ---------- Layout ---------- */
    --largeur-max: 1180px;
    --largeur-texte: 46rem;

    /* ---------- Focus (AAA) ---------- */
    --focus: var(--accent-deep);
}

/* ============================================================================
   SAISONS — axe de température. Poser data-saison sur <html> (défaut global)
   ou sur un conteneur (page, carte, gabarit d'affiche) pour une saison locale.
   Contrastes : deep/crème ≥ 7:1 (AAA). Pour le texte sur aplat d'accent,
   utiliser --accent-profond (blanc ≥ 7:1, AAA) ; --accent-deep + blanc reste
   au niveau AA (~4.5:1) — réservé au grand texte ou au non-textuel.
   ============================================================================ */

/* HIVER — chaud, framboise → rouge (= valeurs :root par défaut, rappel ici) */
[data-saison="hiver"] {
    --accent:      #b83055;
    --accent-2:    #c0395a;
    --accent-deep: #8e2240;
    --accent-soft: #f7dce3;
    --accent-profond: #8e2240;
}

/* AUTOMNE — chaud, ambre → terracotta */
[data-saison="automne"] {
    --accent:      #b5611a;
    --accent-2:    #a8472a;
    --accent-deep: #7e3906;
    --accent-soft: #f8e4ce;
    --accent-profond: #7e3906;
}

/* PRINTEMPS — tempéré, corail → prune */
[data-saison="printemps"] {
    --accent:      #b24a78;
    --accent-2:    #9b5a93;
    --accent-deep: #822850;
    --accent-soft: #f4dce9;
    --accent-profond: #822850;
}

/* ÉTÉ — frais, bleu → turquoise/mousse */
[data-saison="ete"] {
    --accent:      #1f7c8c;
    --accent-2:    #247d6a;
    --accent-deep: #13535f;
    --accent-soft: #d7ebef;
    --accent-profond: #13535f;
}

/* ============================================================================
   PALETTES D'ENSEMBLE — choisies par chaque orchestre (App\Enums\ThemeEnsemble),
   posées via [data-theme-ensemble] sur <html>. Priment sur l'accent saisonnier
   (déclarées après). Toutes AAA + CUD-safe : --accent-deep/--accent-profond
   sombres → texte AAA sur crème ET blanc AAA dessus. --accent-grad et --focus
   se recalculent automatiquement (ils référencent ces variables).
   ============================================================================ */
[data-theme-ensemble="cuivre"]   { --accent:#8A6200; --accent-2:#A8841E; --accent-deep:#5F4400; --accent-profond:#5F4400; --accent-soft:#F5ECD6; }
[data-theme-ensemble="nuit"]     { --accent:#1E3A8A; --accent-2:#2C4FB0; --accent-deep:#16306E; --accent-profond:#16306E; --accent-soft:#E4E9F5; }
[data-theme-ensemble="bordeaux"] { --accent:#7A1F2B; --accent-2:#9B3340; --accent-deep:#641722; --accent-profond:#641722; --accent-soft:#F3E2E4; }
[data-theme-ensemble="foret"]    { --accent:#1F5132; --accent-2:#2E6B45; --accent-deep:#17402A; --accent-profond:#17402A; --accent-soft:#E0EBE2; }
[data-theme-ensemble="prune"]    { --accent:#5B2A86; --accent-2:#743BA3; --accent-deep:#48206B; --accent-profond:#48206B; --accent-soft:#ECE3F3; }
[data-theme-ensemble="ardoise"]  { --accent:#37474F; --accent-2:#4E626B; --accent-deep:#28353B; --accent-profond:#28353B; --accent-soft:#E6EAEC; }
[data-theme-ensemble="brique"]   { --accent:#9A3115; --accent-2:#B5481F; --accent-deep:#7C2711; --accent-profond:#7C2711; --accent-soft:#F6E5DD; }
[data-theme-ensemble="sauge"]    { --accent:#2F6B4F; --accent-2:#3F8262; --accent-deep:#24533D; --accent-profond:#24533D; --accent-soft:#E2EDE7; }

/* ============================================================================
   MODE SOMBRE — neutres inversés, accent éclairci. Les accents saisonniers
   restent identifiables ; le texte d'accent passe sur une version claire.
   ============================================================================ */
/* Activé via [data-theme="dark"] posé par le script de thème (choix mémorisé
   OU préférence système par défaut). --accent-profond N'est PAS redéfini ici :
   il reste sombre dans les deux thèmes (surfaces porteuses de texte). */
:root[data-theme="dark"] {
    --creme:       #16130f;
    --creme-ombre: #100d0a;
    --papier:      #211c17;
    --encre:       #f3ece1;  /* ~15:1 sur fond sombre */
    --encre-douce: #c9bfb1;  /* ~9:1 */
    --ligne:       #3a322a;
    --ligne-forte: #564b3f;
    --accent-contraste: #16130f;
    /* le panneau profond est légèrement relevé en mode sombre, jamais inversé */
    --panneau:       #241d17;
    --panneau-texte: #f3ece1;
    --panneau-texte-doux: #cabfb0;

    /* défaut hiver — version claire pour fonds sombres */
    --accent:      #e98aa3;
    --accent-2:    #e0738f;
    --accent-deep: #f3b6c4;  /* texte d'accent sur sombre */
    --accent-soft: #3a2129;
}
:root[data-theme="dark"][data-saison="automne"] {
    --accent: #e0a35f; --accent-2: #d98863; --accent-deep: #f0cda0; --accent-soft: #3a2a16;
}
:root[data-theme="dark"][data-saison="printemps"] {
    --accent: #e08bb4; --accent-2: #cf9ec8; --accent-deep: #f2c4dc; --accent-soft: #34202c;
}
:root[data-theme="dark"][data-saison="ete"] {
    --accent: #66c2d2; --accent-2: #6fc9b4; --accent-deep: #aee0e9; --accent-soft: #143038;
}

/* ============================================================================
   CONTRASTE RENFORCÉ — noir/blanc pur, focus épais.
   ============================================================================ */
@media (prefers-contrast: more) {
    :root {
        --creme: #ffffff; --papier: #ffffff; --creme-ombre: #ffffff;
        --encre: #000000; --encre-douce: #000000;
        --ligne: #000000; --ligne-forte: #000000;
        --accent: #000000; --accent-2: #000000; --accent-deep: #000000;
        --accent-soft: #ffffff; --accent-contraste: #ffffff;
        --focus: #000000;
    }
    :root[data-theme="dark"] {
        --creme: #000000; --papier: #000000;
        --encre: #ffffff; --encre-douce: #ffffff;
        --accent: #ffffff; --accent-2: #ffffff; --accent-deep: #ffffff;
        --accent-soft: #000000; --accent-contraste: #000000; --focus: #ffffff;
    }
}

/* ============================================================================
   PONTS DE COMPATIBILITÉ — les variables historiques dérivent des tokens.
   Évite de réécrire tous les composants : ils héritent de la nouvelle identité.
   ============================================================================ */
:root {
    /* Espace membre / admin (app.css) */
    --couleur-primaire:    var(--encre);
    --couleur-secondaire:  var(--accent-deep);
    --couleur-accent:      var(--accent-deep);
    --couleur-texte:       var(--encre);
    --couleur-texte-clair: var(--encre-douce);
    --couleur-fond:        var(--creme);
    --couleur-carte:       var(--papier);
    --couleur-bordure:     var(--ligne);
    --couleur-succes:      var(--succes);
    --couleur-erreur:      var(--erreur);
    --couleur-focus:       var(--focus);
    --rayon:               var(--rayon-sm);
    --ombre:               var(--ombre-sm);

    /* Site public (.public-site dans app.css) */
    --pub-noir:    var(--encre);
    --pub-nuit:    var(--encre);
    --pub-ardoise: var(--encre-douce);
    --pub-or:        var(--accent-deep);
    --pub-or-clair:  var(--accent);
    --pub-or-sombre: var(--accent-deep);
    --pub-creme:   var(--creme);
    --pub-blanc:   var(--papier);
    --pub-texte:       var(--encre);
    --pub-texte-doux:  var(--encre-douce);
    --pub-texte-clair-sur-sombre: #f3ece1;
    --pub-gris:    var(--encre-douce);
}