/* assets/css/tokens.css — Eneryon redesign v2
 * Référence : spec §4.1 + §4.2.bis (9 affinements DESIGN.md)
 */
:root {
    /* ═══ PALETTE — warm-toned exclusive ═══ */
    --c-bg:           #F4EDE0;
    --c-bg-alt:       #EDE3CF;
    --c-paper:        #FAF6EC;
    --c-ink:          #1F1812;
    --c-text:         #4A3F35;
    --c-muted:        #7A6850;
    --c-accent:       #B8451F;
    --c-accent-soft:  rgba(184, 69, 31, 0.15);
    --c-accent-hover: #9C3A1A;
    --c-success:      #2D8E5A;
    --c-success-soft: rgba(45, 142, 90, 0.08);

    /* Affinement #7 : borders cream-tinted */
    --c-line:         #E8DFD0;
    --c-line-strong:  #DCD0B8;
    --c-line-ink:     #1F1812; /* uniquement border-top lede-block */

    /* ═══ TYPOGRAPHY ═══ */
    --ff-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --ff-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ff-mono:  "IBM Plex Mono", "SF Mono", Menlo, monospace;

    /* Affinement #4 : line-height 1.55 → 1.60 */
    --lh-tight: 1.05; --lh-snug: 1.20; --lh-base: 1.60; --lh-loose: 1.75;

    /* Affinement #3 : letter-spacing absolu px sur display */
    --ls-tight: -0.02em;
    --ls-display: -1.4px;
    --ls-h2: -1.0px;
    --ls-base: 0;
    --ls-wide: 0.10em;
    --ls-wider: 0.16em;

    --fs-xs: 0.625rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem;
    --fs-md: 1.0625rem; --fs-lg: 1.5rem; --fs-xl: 2.25rem; --fs-2xl: 3.5rem;

    /* ═══ SPACING ═══ */
    --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 24px;
    --space-5: 36px; --space-6: 48px; --space-7: 70px; --space-8: 80px;

    /* ═══ LAYOUT ═══ */
    /* Container : full PC = 1280px (standard moderne Stripe/Mercury/Linear),
       narrow = 720px pour textes long-form (lisibilité 60-75 chars/ligne),
       wide = 1480px pour visuels ultra-larges (rubric grid, hero full-bleed) */
    --container-max:    1280px;
    --container-narrow: 720px;
    --container-wide:   1480px;
    --container-px: 48px; --container-px-mobile: 20px;

    /* ═══ RADIUS — affinement #9 ═══ */
    --r-input: 4px; --r-button: 8px; --r-card: 0;
    --r-featured: 16px; --r-hero: 24px;
    --r-pill: 9999px; /* affinement #8 */
    --r-circle: 50%;

    /* ═══ BORDERS spéciaux ═══ */
    --border-data-box: 3px solid var(--c-accent);
    --border-lede: 2px solid var(--c-line-ink);

    /* ═══ SHADOWS — affinement #2 (ring) + #6 (multi-layer) ═══ */
    --ring-warm:      0 0 0 1px #D5C9B3;
    --ring-warm-deep: 0 0 0 1px #C2B89E;
    --ring-accent:    0 0 0 1px var(--c-accent-soft);

    --shadow-card:
        0 4px 18px rgba(31, 24, 18, 0.04),
        0 2px 8px rgba(31, 24, 18, 0.027),
        0 0.8px 3px rgba(31, 24, 18, 0.02),
        0 0.2px 1px rgba(31, 24, 18, 0.01);

    --shadow-deep:
        0 23px 52px rgba(31, 24, 18, 0.05),
        0 14px 28px rgba(31, 24, 18, 0.04),
        0 7px 15px rgba(31, 24, 18, 0.02),
        0 3px 7px rgba(31, 24, 18, 0.02),
        0 1px 3px rgba(31, 24, 18, 0.01);

    /* ═══ Z-INDEX ═══ */
    --z-nav: 50; --z-modal: 100; --z-tooltip: 200;

    /* ═══ ANIMATION TIMING ═══ */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --d-fast: 150ms;
    --d-base: 300ms;
    --d-slow: 500ms;
}

@media (max-width: 768px) {
    :root {
        --container-px: var(--container-px-mobile);
        --space-7: 48px;
    }
}