/**
 * Tokens — Rub a Lamp
 * Alle CSS custom properties (design tokens)
 * Dette er det eneste sted designsystemets værdier defineres.
 * Opdateret: 2026-03-04
 */


/* ============================================================
   DESKTOP — BASE TOKENS
   ============================================================ */

:root {

    /* --- Farver --- */
    --color-primary:     #003bff;   /* Blå — accent, links, knapper */
    --color-black:       #000000;   /* Primær tekstfarve */
    --color-white:       #ffffff;   /* Baggrund / lys tekst */
    --color-bg:          #ffffff;   /* Side-baggrund */

    /* --- Skriftfamilie --- */
    --font-base:         'Nunito Sans', sans-serif;

    /* --- Skriftvægte --- */
    --font-light:        300;
    --font-regular:      400;
    --font-semibold:     600;
    --font-bold:         700;

    /* --- Variable font axes --- */
    --font-variation:    'YTLC' 500, 'wdth' 100;

    /* --- Skriftstørrelser --- */
    --text-logo:         1.4rem;    /* 28px */
    --text-nav:          1rem;      /* 20px */
    --text-hero:         2.1rem;    /* 42px */
    --text-h2:           1.4rem;    /* 28px */
    --text-body:         1rem;      /* 20px */
    --text-btn:          1rem;      /* 20px */

    /* --- Linjehøjder --- */
    --leading-hero:      2.3rem;    /* 46px */
    --leading-normal:    normal;
    --leading-intro:     1.35;

    /* --- Spacing --- */
    --space-side:        4rem;      /* 80px  — sidemargin */
    --space-xs:          2rem;      /* 40px  — kolonnemellemrum */
    --space-sm:          2.5rem;    /* 50px  — afstand mellem elementer */
    --space-md:          4rem;      /* 80px  — standard sektionsafstand */
    --space-lg:          5rem;      /* 100px — stor sektionsafstand / sektioner */
    --space-xl:          7rem;      /* 140px — ekstra stor afstand */

    /* --- Knap --- */
    --btn-height:        2.5rem;    /* 50px */
    --radius-btn:        1.5rem;    /* 30px */

}


/* ============================================================
   TABLET — 768px
   ============================================================ */

@media (max-width: 768px) {

    :root {
        --space-side: 2rem;
    }

}


/* ============================================================
   MOBIL — 480px
   ============================================================ */

@media (max-width: 480px) {

    :root {

        /* Skriftstørrelser */
        --text-logo:      1rem;     /* 20px */
        --text-hero:      1rem;     /* 20px */
        --text-h2:        1rem;     /* 20px */
        --text-body:      0.8rem;   /* 16px */
        --text-btn:       0.8rem;   /* 16px */

        /* Linjehøjder */
        --leading-hero:   1.2rem;   /* 24px */

        /* Spacing */
        --space-side:     0.75rem;  /* 15px */

        /* Knap */
        --btn-height:     1.5rem;   /* 30px */
        --radius-btn:     1.5rem;   /* 30px */

    }

}