/* tokens.css — ALLE design-tokens for ASA Økonomi (oekonomi.asa-el.dk).
   Kopieret 1:1 fra Jarvis (asa-jarvis/public/styles/tokens.css, mørkt tema 4. okt 2026), så appen ligner søster-systemerne.
   Komponenter bruger KUN tokens — aldrig rå hex. Et token betyder sin ROLLE, ikke en farve.

   TEMA (Jonas 7. okt 2026: mørkt tema er standard):
     <html>                      → mørkt (standard, også når telefonen står på lyst)
     <html data-theme="dark">    → mørkt
     <html data-theme="light">   → lyst
     <html data-theme="system">  → følger telefonen/computeren (prefers-color-scheme)
   Valget gemmes i localStorage['asa-oek-tema'] og sættes af src/tema.js, før siden tegnes (ingen blink). */

:root {
    color-scheme: dark;

    /* --- Brand (asa-el.dk-paletten) --- */
    --farve-navy:           #0E3A5D;
    --farve-navy-moerk:     #082843;
    --farve-blaa:           #2F80C9;
    --farve-blaa-hover:     #3A8CD6;
    --farve-blaa-lys:       #82B3DF;
    --farve-hvid:           #FFFFFF;   /* ÆGTE hvid: kun tekst/ikon på farvede flader */

    /* --- Flader (mørk navy, fra dybest til lysest) --- */
    --farve-baggrund:       #061B2E;
    --farve-baggrund-lys:   #0A2540;
    --farve-overflade:      #0D2D4A;
    --farve-overflade-hoej: #113659;
    --farve-flade:          #163F63;
    --farve-aktiv:          #2A6FB0;   /* hvid tekst 5,3:1 */
    --farve-aktiv-hover:    #245F98;

    /* --- Tekst --- */
    --farve-tekst:          #EAF1F8;   /* 12,4:1 på overflade */
    --farve-tekst-staerk:   #F7FAFD;
    --farve-tekst-daempet:  #B9CCDD;   /* 8,6:1 */
    --farve-tekst-svag:     #95AFC7;   /* 6,2:1 */

    /* --- Status --- */
    --farve-groen:          #1D9E75;
    --farve-gul:            #D98E04;
    --farve-roed:           #D04444;   /* hvid tekst på fare-knap 4,6:1 */
    --farve-roed-moerk:     #A83232;
    --farve-groen-lys:      #0E3B3C;
    --farve-gul-lys:        #352E1F;
    --farve-roed-lys:       #3A2133;
    --farve-groen-tekst:    #6FD9B0;
    --farve-gul-tekst:      #F4C983;
    --farve-roed-tekst:     #F5A3A3;
    --farve-link:           #9CCBF5;
    --farve-blaa-svag:      #12395C;
    --farve-kant:           #1F4568;
    --farve-kant-staerk:    #2D5A84;
    --farve-linje:          rgba(130, 179, 223, .14);
    --farve-linje-staerk:   rgba(130, 179, 223, .26);
    --farve-hover:          rgba(130, 179, 223, .08);

    /* --- Typografi: Fraunces (overskrifter) + Geist (brødtekst) --- */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-tekst:   'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tekst-xs:   .75rem;
    --tekst-sm:   .875rem;
    --tekst-md:   1rem;
    --tekst-lg:   1.125rem;
    --tekst-xl:   clamp(1.375rem, 1.2rem + .9vw, 1.75rem);
    --tekst-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    --linje-taet: 1.15;
    --linje-normal: 1.55;

    /* --- 8-punkts skala --- */
    --trin-1: .25rem;
    --trin-2: .5rem;
    --trin-3: .75rem;
    --trin-4: 1rem;
    --trin-5: 1.5rem;
    --trin-6: 2rem;
    --trin-7: 3rem;

    /* --- Radius --- */
    --radius:       12px;
    --radius-kort:  16px;
    --radius-knap:  6px;
    --radius-felt:  6px;
    --radius-pille: 999px;

    /* --- Skygger (dyb navy, aldrig sort) --- */
    --skygge:       0 1px 2px rgba(2, 12, 24, .35), 0 8px 24px -10px rgba(2, 12, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .03);
    --skygge-staerk: 0 28px 64px -20px rgba(1, 8, 16, .75), 0 8px 20px -8px rgba(1, 8, 16, .5), 0 0 0 1px rgba(130, 179, 223, .14);
    --skygge-knap:  0 1px 2px rgba(2, 12, 24, .35);
    --gloed-roed:   0 0 0 4px rgba(208, 68, 68, .16);

    /* --- Bevægelse --- */
    --bev-hover:    100ms;
    --bev-standard: 250ms;
    --bev-ark:      320ms;
    --bev-aande:    1.4s;
    --bev-ud:       ease-out;
    --bev-kurve:    cubic-bezier(.2, .7, .3, 1);
    --skelet-flade: linear-gradient(90deg, #0F3150 0%, #17406A 50%, #0F3150 100%);

    /* --- Layout --- */
    --topbar-hoejde: 64px;
    --sidebar-bredde: 248px;
    --side-max:      1400px;
    --gutter:        24px;
    /* Pladsen til Jarvis-boblen nederst til højre (56 px + 16 px fra kanten + 16 px luft) — intet vigtigt må ligge under den */
    --boble-plads:   88px;
    --touch-min:     44px;
    --fokus-ring:    0 0 0 2px var(--farve-baggrund), 0 0 0 4px var(--farve-blaa-lys);

    /* --- Glas og flader --- */
    --glas:          rgba(13, 45, 74, .72);
    --glas-staerk:   rgba(13, 45, 74, .92);
    --side-flade:
        radial-gradient(60% 40% at 0% 0%,     rgba(47, 128, 201, .16), transparent 70%),
        radial-gradient(50% 35% at 100% 100%, rgba(130, 179, 223, .08), transparent 70%),
        linear-gradient(180deg, #061B2E 0%, #071F35 100%);
    --sidebar-flade: linear-gradient(180deg, #082139 0%, #061B2E 100%);
    --topbar-glas:   rgba(6, 27, 46, .86);
    --bruger-flade:  linear-gradient(135deg, var(--farve-blaa) -20%, var(--farve-navy) 120%);
}

/* ---- Lyst tema (kun når det er valgt — mørkt er standard) ---------------------------------------------------- */
:root[data-theme="light"] {
    color-scheme: light;
    --farve-baggrund:       #F2F4F7;
    --farve-baggrund-lys:   #EAF0F6;
    --farve-overflade:      #FFFFFF;
    --farve-overflade-hoej: #F7FAFD;
    --farve-flade:          #D5E6F4;
    --farve-aktiv:          #0E3A5D;   /* hvid tekst 11,6:1 */
    --farve-aktiv-hover:    #082843;
    --farve-tekst:          #102A43;   /* 14,1:1 på hvid */
    --farve-tekst-staerk:   #082843;
    --farve-tekst-daempet:  #3E5A75;   /* 7,0:1 */
    --farve-tekst-svag:     #56708A;   /* 5,1:1 */
    --farve-groen-lys:      #E3F5EE;
    --farve-gul-lys:        #FBF1DC;
    --farve-roed-lys:       #FBE7E7;
    --farve-groen-tekst:    #0B6B4F;
    --farve-gul-tekst:      #7A5200;
    --farve-roed-tekst:     #A12B2B;
    --farve-link:           #1F5F99;
    --farve-blaa-svag:      #E3EEF8;
    --farve-kant:           #C9D6E3;
    --farve-kant-staerk:    #9DB3C9;
    --farve-linje:          rgba(14, 58, 93, .12);
    --farve-linje-staerk:   rgba(14, 58, 93, .24);
    --farve-hover:          rgba(14, 58, 93, .06);
    --skygge:       0 1px 2px rgba(14, 58, 93, .08), 0 8px 24px -12px rgba(14, 58, 93, .18);
    --skygge-staerk: 0 24px 56px -20px rgba(14, 58, 93, .35), 0 0 0 1px rgba(14, 58, 93, .08);
    --skelet-flade: linear-gradient(90deg, #E6EDF4 0%, #F3F7FB 50%, #E6EDF4 100%);
    --glas:          rgba(255, 255, 255, .82);
    --glas-staerk:   rgba(255, 255, 255, .95);
    --side-flade:
        radial-gradient(60% 40% at 0% 0%, rgba(47, 128, 201, .10), transparent 70%),
        linear-gradient(180deg, #F2F4F7 0%, #EEF2F7 100%);
    --sidebar-flade: linear-gradient(180deg, #FFFFFF 0%, #F5F8FB 100%);
    --topbar-glas:   rgba(242, 244, 247, .9);
    --fokus-ring:    0 0 0 2px var(--farve-baggrund), 0 0 0 4px var(--farve-blaa);
}

@media (prefers-color-scheme: light) {
    :root[data-theme="system"] {
        color-scheme: light;
        --farve-baggrund:       #F2F4F7;
        --farve-baggrund-lys:   #EAF0F6;
        --farve-overflade:      #FFFFFF;
        --farve-overflade-hoej: #F7FAFD;
        --farve-flade:          #D5E6F4;
        --farve-aktiv:          #0E3A5D;
        --farve-aktiv-hover:    #082843;
        --farve-tekst:          #102A43;
        --farve-tekst-staerk:   #082843;
        --farve-tekst-daempet:  #3E5A75;
        --farve-tekst-svag:     #56708A;
        --farve-groen-lys:      #E3F5EE;
        --farve-gul-lys:        #FBF1DC;
        --farve-roed-lys:       #FBE7E7;
        --farve-groen-tekst:    #0B6B4F;
        --farve-gul-tekst:      #7A5200;
        --farve-roed-tekst:     #A12B2B;
        --farve-link:           #1F5F99;
        --farve-blaa-svag:      #E3EEF8;
        --farve-kant:           #C9D6E3;
        --farve-kant-staerk:    #9DB3C9;
        --farve-linje:          rgba(14, 58, 93, .12);
        --farve-linje-staerk:   rgba(14, 58, 93, .24);
        --farve-hover:          rgba(14, 58, 93, .06);
        --skygge:       0 1px 2px rgba(14, 58, 93, .08), 0 8px 24px -12px rgba(14, 58, 93, .18);
        --skygge-staerk: 0 24px 56px -20px rgba(14, 58, 93, .35), 0 0 0 1px rgba(14, 58, 93, .08);
        --skelet-flade: linear-gradient(90deg, #E6EDF4 0%, #F3F7FB 50%, #E6EDF4 100%);
        --glas:          rgba(255, 255, 255, .82);
        --glas-staerk:   rgba(255, 255, 255, .95);
        --side-flade:
            radial-gradient(60% 40% at 0% 0%, rgba(47, 128, 201, .10), transparent 70%),
            linear-gradient(180deg, #F2F4F7 0%, #EEF2F7 100%);
        --sidebar-flade: linear-gradient(180deg, #FFFFFF 0%, #F5F8FB 100%);
        --topbar-glas:   rgba(242, 244, 247, .9);
        --fokus-ring:    0 0 0 2px var(--farve-baggrund), 0 0 0 4px var(--farve-blaa);
    }
}

/* Touch-skærme og smalle skærme: trykmål mindst 48 px (aldrig under 44 px nogen steder) */
@media (max-width: 1023.98px), (pointer: coarse) {
    :root { --touch-min: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --bev-hover: 0ms; --bev-standard: 0ms; --bev-ark: 0ms; }
}