/*
 * Tokens - source of truth du design system front.
 *
 * Chaque token declare ici doit etre aussi present dans theme.json
 * pour etre disponible a l'editeur Gutenberg.
 */

:root {
    /* --- Couleurs brutes --- */
    --c-ink:          #0A0A0A;
    --c-ink-soft:     #171717;
    --c-paper:        #FAF9F5;
    --c-paper-pure:   #FFFFFF;
    --c-stone-100:    #EFEDE8;
    --c-stone-200:    #E7E5DF;
    --c-stone-400:    #A8A59C;
    --c-stone-600:    #6B6960;
    --c-stone-800:    #2A2926;
    --c-fuchsia:      #A5127C;
    --c-fuchsia-soft: #C63B95;
    --c-fuchsia-wash: #F5E8EF;
    --c-fuchsia-deep: #6B0A51;

    /* --- Tokens semantiques (seront reassignes par ambiance) --- */
    --color-bg:          var(--c-paper);
    --color-bg-alt:      var(--c-stone-100);
    --color-bg-inverse:  var(--c-ink-soft);
    --color-text:        var(--c-ink);
    --color-text-muted:  var(--c-stone-600);
    --color-text-subtle: var(--c-stone-400);
    --color-text-inverse: var(--c-paper);
    --color-hairline:    var(--c-stone-200);
    --color-accent:      var(--c-fuchsia);
    --color-accent-soft: var(--c-fuchsia-wash);
    --color-btn-bg:      var(--c-ink);
    --color-btn-text:    var(--c-paper);
    --color-btn-border:  var(--c-ink);

    /* --- Typographie (les vraies families sont definies dans typography.css) --- */

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-md:   1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  clamp(2rem, 2.5vw + 1rem, 3.25rem);
    --fs-3xl:  clamp(3rem, 5vw + 1rem, 6.5rem);
    --fs-4xl:  clamp(4rem, 8vw + 1rem, 10rem);
    --fs-5xl:  clamp(5rem, 12vw + 1rem, 14rem);

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:   0.92;
    --lh-snug:    1.05;
    --lh-normal:  1.55;
    --lh-loose:   1.7;

    --tracking-tight:    -0.035em;
    --tracking-display:  -0.055em;
    --tracking-normal:   -0.005em;
    --tracking-wide:     0.04em;
    --tracking-kicker:   0.14em;

    /* --- Spacing --- */
    --sp-0:  0;
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2.5rem;
    --sp-7:  4rem;
    --sp-8:  6.5rem;
    --sp-9:  10.5rem;
    --sp-10: 17rem;

    /* --- Grille & largeurs --- */
    --content-width:   860px;
    --content-wide:    1360px;
    --gutter:          clamp(1rem, 4vw, 4rem);

    /* --- Transitions --- */
    --ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-luxury:    cubic-bezier(0.53, 0.15, 0, 1);
    --ease-snap:      cubic-bezier(0.165, 0.84, 0.44, 1);

    --dur-fast:   120ms;
    --dur-hover:  250ms;
    --dur-reveal: 600ms;
    --dur-menu:   800ms;

    /* --- Z-index --- */
    --z-header:     100;
    --z-mega-menu:  200;
    --z-toast:      300;
    --z-skiplink:   400;

    /* --- Dimensions dynamiques --- */
    --header-h:       96px;   /* hauteur header au chargement */
    --header-h-small: 72px;   /* hauteur header scrolled */
    --preview-bar-h:  0px;    /* la barre preview ne compte plus comme un decalage */
}

@media (max-width: 768px) {
    :root {
        --header-h:       76px;
        --header-h-small: 60px;
    }
}

/* Ambiance sombre (sur body ou section avec [data-ambiance="dark"]) */
.ambiance-dark,
[data-ambiance="dark"] {
    --color-bg:          var(--c-ink-soft);
    --color-bg-alt:      var(--c-ink);
    --color-bg-inverse:  var(--c-paper);
    --color-text:        var(--c-paper);
    --color-text-muted:  var(--c-stone-400);
    --color-text-subtle: var(--c-stone-600);
    --color-text-inverse: var(--c-ink);
    --color-hairline:    rgba(255, 255, 255, 0.1);
    --color-btn-bg:      var(--c-paper);
    --color-btn-text:    var(--c-ink);
    --color-btn-border:  var(--c-paper);
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0.01ms;
        --dur-hover: 0.01ms;
        --dur-reveal: 0.01ms;
        --dur-menu: 0.01ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}