/* tokens.css — ALLE design-tokens for ASA Økonomi (oekonomi.asa-el.dk).
   Farver, flader, skygger, glas, radius og bevægelse er kopieret 1:1 fra Jarvis (asa-jarvis/public/styles/tokens.css,
   mørkt tema 4. okt 2026), så appen ligner søster-systemet. FONT (Jonas 17. okt 2026): Manrope overalt — aldrig Fraunces/Geist. Skiftes KUN her + Google Fonts-linket i HTML-filerne.
   Komponenter bruger KUN tokens — aldrig rå hex/rgba. 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 */
    --farve-lys:            #D5E6F4;   /* ASA lys blå (fælles ASA-palet) */
    --farve-knaekket-hvid:  #F2F4F7;   /* ASA knækket hvid (fælles ASA-palet) */

    /* --- 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-graa-lys:       #12324F;   /* neutral tonet flade (hover, låste badges) */
    --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);
    /* Status-kanter (tonede kort, beskeder) og bagtæppe bag menu/dialog */
    --farve-groen-kant:     rgba(29, 158, 117, .40);
    --farve-gul-kant:       rgba(217, 142, 4, .45);
    --farve-roed-kant:      rgba(208, 68, 68, .50);
    --farve-aktiv-flade:    linear-gradient(90deg, rgba(47, 128, 201, .14), rgba(47, 128, 201, .05));   /* valgt menupunkt (Jarvis) */
    --farve-aktiv-kant:     rgba(47, 128, 201, .14);
    --bagtaeppe:            rgba(2, 12, 24, .6);

    /* --- Typografi: Manrope overalt (Jonas 17. okt 2026) --- */
    --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-tekst:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-tal:     var(--font-tekst);   /* beløb: Manrope med faste tal-bredder (tabular-nums) */
    --tekst-2xs:  .6875rem;  /* 11px — mikro-tekst, mærker */
    --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);
    --tekst-tal:  clamp(1.625rem, 1.35rem + 1vw, 2rem);      /* store beløb på kortene */
    --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;
    --trin-8: 4rem;

    /* --- Radius --- */
    --radius:       12px;
    --radius-kort:  16px;
    --radius-knap:  6px;
    --radius-felt:  6px;
    --radius-pille: 999px;
    --radius-menu:  10px;    /* menupunkter og ikon-knapper i topbaren (Jarvis) */
    --radius-glas:  20px;
    --radius-besked: 18px;

    /* --- 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-svag:  0 1px 2px rgba(2, 12, 24, .35);
    --skygge-hover: 0 2px 4px rgba(2, 12, 24, .4), 0 14px 32px -12px rgba(2, 12, 24, .65), 0 0 0 1px rgba(130, 179, 223, .18);
    --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);
    --skygge-knap-hover: 0 2px 8px rgba(2, 12, 24, .45);
    --skygge-glas:  0 8px 32px -12px rgba(2, 12, 24, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
    --gloed-blaa:   0 0 0 4px rgba(47, 128, 201, .16);
    --gloed-svag:   0 0 0 3px rgba(47, 128, 201, .2);
    --gloed-groen:  0 0 0 4px rgba(29, 158, 117, .18);
    --gloed-roed:   0 0 0 4px rgba(208, 68, 68, .16);
    --gloed-neon:   0 0 0 1px rgba(47, 128, 201, .35), 0 0 24px rgba(47, 128, 201, .18);
    --gloed-ikon:   0 0 16px rgba(47, 128, 201, .35);
    --gloed-bjaelke: 0 0 10px rgba(47, 128, 201, .45);
    --knap-hover-ring: 0 0 0 1px rgba(130, 179, 223, .35);

    /* --- Bevægelse --- */
    --bev-hover:    150ms;
    --bev-klik:     80ms;
    --bev-standard: 250ms;
    --bev-side:     200ms;
    --bev-ark:      320ms;
    --bev-stagger:  30ms;
    --bev-aande:    1.4s;
    --bev-ud:       ease;
    --bev-kurve:    cubic-bezier(.2, .7, .3, 1);
    --bev-fjeder:   cubic-bezier(.2, .9, .3, 1.05);
    --bev-glid-kort: 6px;
    --skelet-flade: linear-gradient(90deg, #0F3150 0%, #17406A 50%, #0F3150 100%);

    /* --- Layout --- */
    --topbar-hoejde: 64px;
    --sidebar-bredde: 264px;   /* = Jarvis */
    --side-max:      1600px;   /* = Jarvis / asa-el.dk */
    --gutter:        16px;     /* mobil 16 · tablet 24 · desktop 32 (Jarvis --side-pad) */
    /* 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;
    --vh:            1dvh;     /* 1 % af skærmhøjden — rettes for zoom på 2K/4K (app.css), så intet bliver for højt */
    --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);
    --glas-kant:     rgba(130, 179, 223, .14);
    --glas-sloer:    blur(20px) saturate(1.4);
    --header-sloer:  saturate(160%) blur(16px);
    --header-linje:  linear-gradient(90deg, transparent, rgba(47, 128, 201, .22), transparent);
    --hud-flade:     linear-gradient(135deg, var(--farve-navy-moerk) 0%, var(--farve-navy) 100%);
    --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, .82);
    --bruger-flade:  linear-gradient(135deg, var(--farve-blaa) -20%, var(--farve-navy) 120%);
    --send-flade:    linear-gradient(135deg, var(--farve-blaa-lys) -30%, var(--farve-blaa) 80%);
}

@media (min-width: 768px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ---- Lyst tema (kun når det er valgt — mørkt er standard) ---------------------------------------------------- */
:root[data-theme="light"] {
    color-scheme: light;
    --farve-baggrund:       var(--farve-knaekket-hvid);
    --farve-baggrund-lys:   #EAF0F6;
    --farve-overflade:      #FFFFFF;
    --farve-overflade-hoej: #F7FAFD;
    --farve-flade:          var(--farve-lys);
    --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-graa-lys:       #EEF1F5;
    --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:       var(--farve-knaekket-hvid);
        --farve-baggrund-lys:   #EAF0F6;
        --farve-overflade:      #FFFFFF;
        --farve-overflade-hoej: #F7FAFD;
        --farve-flade:          var(--farve-lys);
        --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-graa-lys:       #EEF1F5;
        --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-klik: 0ms; --bev-standard: 0ms; --bev-side: 0ms; --bev-ark: 0ms; --bev-stagger: 0ms; --bev-glid-kort: 0px; }
}