/* =========================================================
   STOKOLM — Design tokens
   Source de vérité pour la palette, la typographie, les
   espacements et les élévations. Voir CLAUDE.md du brief
   Stokolm pour les règles d'usage.
   ========================================================= */

:root {
    /* ---------- Neutres : crème / pierre / encre ---------- */
    /* Le fond du site est cream-50, jamais blanc pur. */
    --stk-cream-50:   #FBF8F2;
    --stk-cream-100:  #F5F0E6;
    --stk-cream-200:  #ECE4D2;
    --stk-stone-400:  #A89F8A;
    --stk-stone-600:  #6E6757;
    --stk-ink-900:    #1A1F1A;

    /* ---------- Vert forêt : couleur de marque ---------- */
    --stk-forest-900: #0E2A1F;
    --stk-forest-700: #1F4A36;
    --stk-forest-500: #2F6B4F;
    --stk-forest-200: #C9DCD0;
    --stk-forest-100: #E4EEE7;

    /* ---------- Ocre solaire : accent unique, à doser ---------- */
    /* Maximum un seul élément ocre par section. */
    --stk-solar-600:  #B8721A;
    --stk-solar-400:  #E0A246;
    --stk-solar-100:  #F4E4C7;

    /* ---------- Sémantiques ---------- */
    --stk-success: #2F6B4F;
    --stk-warning: #B8721A;
    --stk-error:   #8B2E2E;
    --stk-info:    #2C4A6B;

    /* ---------- Typographie ---------- */
    --stk-font: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
    --stk-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

    --stk-text-xs:   12px;
    --stk-text-sm:   14px;
    --stk-text-base: 16px;
    --stk-text-lg:   18px;
    --stk-text-xl:   22px;
    --stk-text-2xl:  28px;
    --stk-text-3xl:  36px;
    --stk-text-4xl:  48px;
    --stk-text-5xl:  64px;
    --stk-text-6xl:  88px;

    --stk-leading-tight:  1.05;
    --stk-leading-snug:   1.2;
    --stk-leading-normal: 1.55;
    --stk-leading-loose:  1.7;

    --stk-tracking-tight:  -0.025em;
    --stk-tracking-tighter:-0.04em;
    --stk-tracking-normal: 0;
    --stk-tracking-wide:   0.08em;

    /* ---------- Espacement (échelle 4px) ---------- */
    --stk-space-1:  4px;
    --stk-space-2:  8px;
    --stk-space-3:  12px;
    --stk-space-4:  16px;
    --stk-space-6:  24px;
    --stk-space-8:  32px;
    --stk-space-12: 48px;
    --stk-space-16: 64px;
    --stk-space-24: 96px;
    --stk-space-32: 128px;
    --stk-space-48: 192px;

    /* ---------- Layout ---------- */
    --stk-container-max: 1280px;
    --stk-container-pad: clamp(20px, 4vw, 48px);
    --stk-section-y: clamp(48px, 5vw, 80px);

    /* ---------- Rayons ---------- */
    --stk-radius-sm:   4px;
    --stk-radius-md:   8px;
    --stk-radius-lg:   16px;
    --stk-radius-xl:   24px;
    --stk-radius-pill: 999px;

    /* ---------- Bordures hairline ---------- */
    --stk-border:        1px solid var(--stk-cream-200);
    --stk-border-strong: 1px solid var(--stk-stone-400);

    /* ---------- Élévations (teintées vert forêt, jamais noir) ---------- */
    --stk-shadow-sm: 0 1px 2px rgba(14, 42, 31, 0.04), 0 1px 3px rgba(14, 42, 31, 0.06);
    --stk-shadow-md: 0 2px 8px rgba(14, 42, 31, 0.06), 0 8px 24px rgba(14, 42, 31, 0.08);
    --stk-shadow-lg: 0 4px 16px rgba(14, 42, 31, 0.08), 0 24px 48px rgba(14, 42, 31, 0.12);

    /* ---------- Easing & timing ---------- */
    --stk-ease: cubic-bezier(0.2, 0, 0, 1);
    --stk-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --stk-t-fast:   150ms;
    --stk-t-medium: 200ms;
    --stk-t-slow:   400ms;

    /* ---------- Z-index ---------- */
    --stk-z-base:        1;
    --stk-z-floating:    50;
    --stk-z-navbar:      100;
    --stk-z-mobile-menu: 110;
    --stk-z-modal:       200;

    /* ---------- Aliases legacy (pour ne pas casser le code existant)
       — à supprimer progressivement ---------- */
    --stokolm-primary:        var(--stk-ink-900);
    --stokolm-primary-dark:   var(--stk-forest-900);
    --stokolm-primary-light:  var(--stk-forest-700);
    --stokolm-blue:           var(--stk-forest-700);
    --stokolm-blue-light:     var(--stk-forest-500);
    --stokolm-blue-dark:      var(--stk-forest-900);
    --stokolm-red:            var(--stk-solar-600);
    --stokolm-red-light:      var(--stk-solar-400);
    --stokolm-red-dark:       #9D5F12;
    --stokolm-white:          var(--stk-cream-50);
    --stokolm-off-white:      var(--stk-cream-50);
    --stokolm-bg-light:       var(--stk-cream-100);
    --stokolm-bg-section:     var(--stk-cream-100);
    --stokolm-text:           var(--stk-ink-900);
    --stokolm-text-muted:     var(--stk-stone-600);
    --stokolm-border:         var(--stk-cream-200);
    --stokolm-success:        var(--stk-success);
    --stokolm-warning:        var(--stk-warning);

    --gradient-hero:    none;
    --gradient-cta:     var(--stk-forest-700);
    --gradient-accent:  var(--stk-solar-600);
    --gradient-overlay: linear-gradient(180deg, transparent 40%, rgba(14,42,31,0.7) 100%);

    --font-display: var(--stk-font);
    --font-body:    var(--stk-font);

    --text-hero:  clamp(48px, 6.5vw, 88px);
    --text-h1:    clamp(36px, 4.5vw, 56px);
    --text-h2:    clamp(28px, 3.5vw, 44px);
    --text-h3:    clamp(22px, 2.5vw, 28px);
    --text-h4:    20px;
    --text-body:  16px;
    --text-small: 14px;
    --text-xs:    12px;

    --leading-tight:   var(--stk-leading-tight);
    --leading-snug:    var(--stk-leading-snug);
    --leading-normal:  var(--stk-leading-normal);
    --leading-relaxed: var(--stk-leading-loose);

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 500;
    --weight-bold:     500;
    --weight-black:    600;

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    --container-max: var(--stk-container-max);
    --container-px:  var(--stk-container-pad);

    --radius-sm:   var(--stk-radius-sm);
    --radius-md:   var(--stk-radius-md);
    --radius-lg:   var(--stk-radius-lg);
    --radius-xl:   var(--stk-radius-lg);
    --radius-2xl:  var(--stk-radius-xl);
    --radius-full: var(--stk-radius-pill);

    --shadow-sm:    var(--stk-shadow-sm);
    --shadow-md:    var(--stk-shadow-sm);
    --shadow-lg:    var(--stk-shadow-md);
    --shadow-xl:    var(--stk-shadow-lg);
    --shadow-blue:  var(--stk-shadow-md);
    --shadow-red:   var(--stk-shadow-md);

    --ease-out:     var(--stk-ease);
    --ease-bounce:  var(--stk-ease-bounce);
    --ease-in-out:  var(--stk-ease);

    --t-fast:    var(--stk-t-fast);
    --t-medium:  var(--stk-t-medium);
    --t-slow:    var(--stk-t-slow);
    --t-counter: 1500ms;

    --z-base:        var(--stk-z-base);
    --z-floating:    var(--stk-z-floating);
    --z-navbar:      var(--stk-z-navbar);
    --z-mobile-menu: var(--stk-z-mobile-menu);
    --z-modal:       var(--stk-z-modal);

    --bp-mobile:  480px;
    --bp-tablet:  768px;
    --bp-desktop: 1024px;
    --bp-wide:    1280px;
    --bp-ultra:   1536px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --stk-t-fast:   0ms;
        --stk-t-medium: 0ms;
        --stk-t-slow:   0ms;
        --t-fast:       0ms;
        --t-medium:     0ms;
        --t-slow:       0ms;
        --t-counter:    0ms;
    }
}