/* ==========================================================
   _00-TOKENS.CSS — DESIGNSYSTEM
   ========================================================== */
:root {
    /* Färger */
    --color-bg:        #ffffff;
    --color-text:      #121212;
    --color-muted:     #666666;
    --color-faint:     #999999;
    --color-border:    #e0e0e0;
    --color-highlight: #fffcfa;
    --color-accent:    #fc4242;
    --color-dark-bg:   #121212;
    --color-dark-text: #f5f0eb;

    /* Typsnitt */
    --font-display: 'Space Grotesk', sans-serif;
    --font-mono:    'Space Mono', monospace;

    /* Fluid textstorlekar */
    --text-xs:   0.9rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   clamp(1rem,   0.85rem + 0.6vw,  1.25rem);
    --text-lg:   clamp(1.2rem, 0.9rem  + 1vw,    1.6rem);
    --text-xl:   clamp(1.5rem, 0.9rem  + 1.8vw,  2.2rem);
    --text-2xl:  clamp(2rem,   1rem    + 2.8vw,  3.2rem);
    --text-3xl:  clamp(2.5rem, 1rem    + 4vw,    4.5rem);
    --text-hero: clamp(3rem,   1.5rem  + 5vw,    6rem);

    /*
     * SIDMARGINALER — fluid, ingen fast max-width.
     *
     *   320px skärm  →  20px  (absolut minimum)
     *   768px skärm  →  38px
     *   1280px skärm →  64px
     *   1920px skärm →  96px
     *   2560px skärm → 128px  (skärp upwards scaling)
     *
     * Formel: clamp(min, a + b*vw, max)
     * Primär:  20px → 128px över 320–2560px = ~5vw med offset
     */
    --padding-x:    clamp(20px, 1.25rem + 4.5vw, 140px);
    --padding-x-sm: clamp(16px, 1rem + 2.5vw, 80px);

    /* Vertikal rytm */
    --section-y:    clamp(60px, 7vw, 160px);
    --section-y-sm: clamp(40px, 4vw, 100px);
    --block-gap:    clamp(20px, 2.5vw, 60px);

    /* Spacing (8px grid) */
    --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;
    --sp-4:  16px; --sp-5:  20px; --sp-6: 24px;
    --sp-8:  32px; --sp-10: 40px; --sp-12: 48px;
    --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

    /*
     * Ingen hård max-width — innehållet flödar fritt.
     * Använd --max-content-width när du vill begränsa läsbredden.
     */
    --max-content-width: 1800px;
    --read-width:        780px;
    --header-h:          clamp(64px, 5.5vw, 90px);

    /* Transitions */
    --t-fast: 0.18s ease;
    --t-base: 0.28s ease;
    --t-slow: 0.5s ease;
}

/* Ytterligare skalning på riktigt stora skärmar */
@media (min-width: 2000px) {
    :root { --padding-x: clamp(100px, 7vw, 200px); }
}