/* ============================================================
   YLLY 2026 — Design Tokens
   Toutes les valeurs extraites du fichier Figma NovCast
   ============================================================ */

:root {
    /* --- Couleurs surfaces --- */
    --color-surface-primary:   #251c45;  /* Fond dark — déclenche mode dark */
    --color-surface-secondary: #d63500;  /* Boutons CTA, accents */
    --color-surface-white:     #ffffff;
    --color-surface-default:   #f2f1f6;  /* Fond gris clair */

    /* --- Couleurs textes --- */
    --color-text-default:  #0f172b;
    --color-text-invert:   #ffffff;
    --color-text-muted:    #6b7280;

    /* --- Couleurs décoratives --- */
    --color-orange-300:        #ff7429;
    --color-orange-500:        #ff470a;
    --color-orange-700:        #d63500;
    --color-decoration-purple: #4f39f6;

    /* --- Bordures --- */
    --color-stroke-default: #f2f1f6;
    --color-stroke-white:   #ffffff;
    --color-stroke-light:   #e2e8f0;  /* Bordures haut/bas des sections — Figma key-numbers */

    /* --- Typographie --- */
    --font-family-base:    'Instrument Sans', sans-serif;
    /* Accent italique des titres — chargee dans functions.php, verifiee Figma */
    --font-family-display: 'Playfair Display', Georgia, serif;

    --font-size-xxs:  0.75rem;   /* 12px */
    --font-size-xs:   0.875rem;  /* 14px */
    --font-size-sm:   1rem;      /* 16px */
    --font-size-md:   1.125rem;  /* 18px */
    --font-size-lg:   1.25rem;   /* 20px */
    --font-size-h4:   1.5rem;    /* 24px — Figma Headings/H4/Basic */
    --font-size-h3:   2rem;      /* 32px */
    --font-size-h2:   2.5rem;    /* 40px */
    --font-size-h1:   3.25rem;   /* 52px */
    --font-size-display: 2.875rem; /* 46px — titres de section homepage (key-numbers, step-cards) */
    --font-size-hero:    3.75rem;  /* 60px — titre du hero */

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:  1;
    --line-height-snug:   1.2;
    --line-height-normal: 1.3;
    --line-height-relaxed: 1.6;
    --line-height-loose:  1.8;

    /* Hauteurs de ligne par niveau — relevees dans les variables Figma */
    --line-height-heading: 1;    /* H1 / H2 / H3 / H4 */
    --line-height-lg:      1.3;  /* Body/LG */
    --line-height-md:      1.7;  /* Body/MD */
    --line-height-sm:      1.8;  /* Body/SM */
    --line-height-xs:      1.6;  /* Body/XS et XXS */

    --letter-spacing-h1:   -0.0577em;  /* -3px @ 52px */
    --letter-spacing-h2:   -0.05em;    /* -2px @ 40px */
    --letter-spacing-h3:   -0.0625em;  /* -2px @ 32px */
    --letter-spacing-lg:   -0.05em;    /* -1px @ 20px */
    --letter-spacing-md:   -0.0278em;  /* -0.5px @ 18px */
    --letter-spacing-sm:   -0.01875em; /* -0.3px @ 16px */
    --letter-spacing-none: 0;

    /* --- Espacements --- */
    --space-4:   0.25rem;
    --space-8:   0.5rem;
    --space-12:  0.75rem;
    --space-16:  1rem;
    --space-20:  1.25rem;
    --space-24:  1.5rem;
    --space-32:  2rem;
    --space-40:  2.5rem;
    --space-48:  3rem;
    --space-64:  4rem;
    --space-80:  5rem;
    --space-96:  6rem;
    --space-120: 7.5rem;

    /* --- Rayons --- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-card: 10px;   /* Cartes de liste — Figma step-cards */
    --radius-hero: 16px;   /* Conteneur hero — Figma Headers */
    --radius-pill: 44px;   /* Boutons et pilules — Figma composant Button */
    --radius-full: 9999px; /* Cercles parfaits uniquement (avatars, puces) */

    /* --- Boutons — composant Figma Button (node 425:1853) --- */
    --btn-primary-bg:     var(--color-surface-secondary);
    --btn-primary-color:  var(--color-text-invert);
    --btn-radius:         var(--radius-pill);  /* 44px, PAS un pill integral */
    --btn-height:         55px;
    --btn-min-width:      150px;
    --btn-padding-y:      8px;
    --btn-padding-x:      22px;
    --btn-gap:            11px;
    --btn-icon-size:      24px;
    --btn-font-size:      var(--font-size-sm);      /* 16px */
    --btn-font-weight:    var(--font-weight-medium); /* 500 — Medium, pas SemiBold */
    --btn-line-height:    var(--line-height-sm);     /* 1.8 */
    --btn-letter-spacing: -0.048px;                 /* composant Button Figma 425:1853 — PAS le letter-spacing du corps de texte */

    /* --- Rythme vertical des sections ---
       Trois niveaux fluides qui remplacent les 16 valeurs de padding-block
       relevees dans les blocs, et unifient les deux strategies qui
       cohabitaient (px fixes et clamp). Le clamp rend les media queries de
       padding inutiles au niveau des blocs.
       Figma n'est pas systematique sur ce point (111px sur key-numbers,
       100px sur step-cards, 80px sur grille-accordeon) : ces niveaux sont un
       arbitrage, pas un releve. */
    --section-py-sm: clamp(32px, 4vw,  48px);  /* bandeaux, hero secondaires */
    --section-py-md: clamp(48px, 6vw,  80px);  /* sections intermediaires */
    --section-py-lg: clamp(64px, 8vw, 100px);  /* sections de contenu */

    /* --- Layout --- */
    --container-content: 1240px;
    --container-wide:    1440px;
    --container-padding: clamp(1rem, 4vw, 5rem);

    /* --- Breakpoints (référence commentaire, non utilisables en CSS natif) --- */
    /* --bp-tablet: 992px; --bp-mobile: 390px; */

    /* --- Transitions --- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Z-index --- */
    --z-base:    0;
    --z-above:   1;
    --z-header:  1000;
    --z-overlay: 2000;
    --z-modal:   3000;
}