/* Design tokens — aleadespossibles.fr
   Direction « Rideau & projecteur » : drench sombre théâtral, halos de scène.
   Le design vit exclusivement ici + style.css. Restyler ne touche jamais au PHP. */
:root {
    color-scheme: dark;

    /* Surfaces — scène plongée dans le noir aubergine */
    --bg:        oklch(0.163 0.028 335);   /* fond scène */
    --bg-2:      oklch(0.128 0.024 335);   /* puits : footer, coulisses */
    --surface:   oklch(0.213 0.028 332);   /* cartes, panneaux */
    --surface-2: oklch(0.258 0.030 332);   /* survol / élevé */
    --line:      oklch(0.40 0.03 330 / .45);
    --line-soft: oklch(0.40 0.03 330 / .24);

    /* Encre chaude sur sombre (contraste AA) */
    --ink:       oklch(0.970 0.012 85);
    --ink-soft:  oklch(0.838 0.020 70);
    --ink-mute:  oklch(0.700 0.024 55);
    --on-accent: oklch(0.150 0.020 335);   /* texte sombre posé sur une couleur vive */

    /* Lumières de scène (accents) */
    --brand:     oklch(0.635 0.213 14);    /* rouge scène / rose */
    --brand-lit: oklch(0.700 0.200 18);    /* plus vif (survol) */
    --amber:     oklch(0.820 0.150 72);    /* projecteur */
    --violet:    oklch(0.620 0.200 295);   /* rideau */
    --link:      var(--amber);

    /* Genres — vifs, faits pour briller sur le sombre */
    --g-humour:           oklch(0.815 0.150 70);
    --g-theatre:          oklch(0.660 0.205 15);
    --g-cirque:           oklch(0.655 0.190 295);
    --g-concerts:         oklch(0.680 0.150 250);
    --g-danse:            oklch(0.680 0.200 350);
    --g-spectacle-vivant: oklch(0.740 0.130 182);
    --g-expo:             oklch(0.740 0.130 230);
    --g-lieu:             oklch(0.760 0.020 320);

    /* Typo */
    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --font-body: "Figtree", system-ui, -apple-system, sans-serif;

    /* Rayons */
    --radius: 16px;
    --radius-sm: 11px;
    --radius-pill: 999px;

    /* Ombres & halos — sur sombre, le halo fait l'élévation */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .40);
    --shadow-md: 0 16px 40px rgb(0 0 0 / .55);
    --glow-brand: 0 8px 30px oklch(0.635 0.213 14 / .40);
    --glow-amber: 0 0 34px oklch(0.820 0.150 72 / .28);

    /* Espacements */
    --wrap: 1140px;
    --gap: 1.15rem;
    --space: clamp(2.25rem, 5.5vw, 4.75rem);

    /* Mouvement */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
    --dur: .55s;

    /* z-index sémantique */
    --z-sticky: 200;
    --z-skip: 300;
}