/**
 * MAPPE: /assets/css/base/
 * FIL: variables.css
 *
 * BRUGES AF: ALLE sider
 *
 * BESKRIVELSE:
 * CSS custom properties (variabler) brugt i hele projektet.
 * Inkluder ALTID som den første CSS-fil.
 *
 * Design manual farver:
 * Primær #0D1B2A · Sekundær #2563EB · Accent #FF6B30
 * Light #F5F7FA · Surface #FFFFFF · Text #111827 · Muted #6B7280
 */

:root {
    /* Farver — Nivoo design system (kerne-tokens)
       --primær: brand-mørkeblå · --sekundær: brand-blå (små knapper/links, D1)
       --accent: brand-orange (primære CTAs, mørk tekst, D1) */
    --primær: #0D1B2A;
    --sekundær: #2563EB;
    --accent: #FF6B30;
    --accent-hover: #e55a1e;  /* mørkere orange — hover på CTA'er (F3) */
    --success: #16a34a;
    --fejl: #dc2626;
    --advarsel: #d97706;
    --lys-grå: #F5F7FA;
    --mørk-grå: #6B7280;     /* mindste tilladte tekst-grå på lys flade (4.83:1) */
    --mellem-grå: #9CA3AF;   /* KUN dekorativ/disabled — aldrig meningsbærende tekst (D1) */
    --baggrund: #F5F7FA;
    --hvid: #ffffff;
    --tekst: #111827;

    /* ============================================================
       SEMANTISKE FLADER (UX task 05 → dark mode-forudsætning, D10)
       Dark mode (task 08) overstyrer disse i én blok — brug derfor
       ALTID tokens til flader/tekst/kanter, aldrig rå hex.
       VIGTIGT: hvid TEKST på farvet knap forbliver litteral #fff
       (tema-invariant); kun flader og neutral tekst tokeniseres.
       ============================================================ */
    --tekst-paa-accent: #111827; /* TEMA-INVARIANT: mørk tekst på orange (D1) — flipper ALDRIG */
    --surface: #ffffff;      /* kort, paneler, modaler, inputs */
    --surface-2: #F5F7FA;    /* sektioner, sidebaggrund, hover-flader */
    --border: #e2e8f0;       /* standard-kant (alias: --color-border) */

    /* Neutral GRÅ-skala — DEPRECATED ALIAS af slate (designbeslutning F2:
       slate er nivoos ene neutral-skala; --gray-* peger på --slate-* så ældre
       brug automatisk bliver slate. Brug --slate-* i ny kode). */
    --gray-50: var(--slate-50);
    --gray-100: var(--slate-100);
    --gray-200: var(--slate-200);
    --gray-300: var(--slate-300);
    --gray-400: var(--slate-400);
    --gray-500: var(--slate-500);
    --gray-600: var(--slate-600);
    --gray-700: var(--slate-700);
    --gray-800: var(--slate-800);
    --gray-900: var(--slate-900);

    /* Neutral SLATE-skala — KANONISK neutral (F2). Flader 50-200, tekst 500-900.
       Kølig/blå-tonet så den harmonerer med brand-navy + brand-blå. */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* STATUS-FAMILIER — badge-tints (-100) + tekst (-700/-800) flipper
       sammen i dark mode. Kanon: status-sprog ens overalt (task 05 pkt. 6) */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #d1fae5;   /* emerald-100 — historisk variant, samme rolle */
    --green-300: #86efac;
    --green-500: #10b981;
    --green-600: #059669;
    --green-800: #166534;
    --green-900: #065f46;
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-500: #ef4444;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-500: #f59e0b;
    --amber-800: #92400e;
    --sky-100: #e0f2fe;
    --sky-700: #0369a1;
    --violet-100: #ede9fe;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --violet-800: #5b21b6;
    --orange-100: #ffedd5;
    --orange-50: #fff7ed;
    --orange-800: #9a3412;

    /* Background gradient med billede */
    --background:
        linear-gradient(rgba(255,255,255,0.97), rgba(255,255,255,0.97)),
        url("/uploads/hero1.png");

    /* Spacing — KANONISK skala (SP1). Rå px migreres til tokens per-side (SP2: A) */
    --spacing-2xs: 0.25rem;  /* ≈4px — tætte gaps, ikon-afstande */
    --spacing-xs: 0.375rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1.125rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2.25rem;
    --spacing-xxl: 3rem;

    /* Border-radius — KANONISK skala (R1: Afbalanceret) */
    --radius-sm: 4px;     /* badges, små knapper, inputs (R2: bløde rektangler) */
    --radius-md: 8px;     /* knapper, kort, paneler (standard) */
    --radius-lg: 12px;    /* store kort, modaler */
    --radius-xl: 16px;    /* hero-flader, store containere */
    --radius-full: 999px; /* pills, runde elementer */
    --border-radius: var(--radius-md); /* historisk alias → md (8px) */
    --transition: all 0.3s ease;

    /* Typografi (T3) — én monospace-stak til teknisk tekst (ordrenr., koder, beløb) */
    --monospace: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

    /* Shadows — KANONISK elevation (S1: Subtil) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.09);
    --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.12);
    --skygge: var(--shadow-sm); /* historisk alias → sm */

    /* Borders (alias — brug --border) */
    --color-border: #e2e8f0;

    /* Text colors (alias — brug --tekst / --mørk-grå) */
    --color-text: #111827;
    --color-text-light: #6B7280;

    /* Primary color alias (alias — brug --accent; navnet er historisk misvisende) */
    --color-primary: #FF6B30;

    /* Historisk navn brugt ~20 steder (byvalg_modal, betaling m.fl.) — var
       aldrig defineret (faldt tilbage til currentColor). Alias til --primær */
    --farve-primaer: var(--primær);
    --farve-primær: var(--primær);  /* æ-stavningen bruges også (opret_produkt) */

    /* ============================================================
       TEMA-INVARIANTE KNAP-HOVERS (dark mode-audit 2026-07-08).
       Fælde: -700/-600-tekst-trin som hover-BAGGRUND under hvid tekst
       flipper LYS i dark → hvid-på-lys. Disse tokens overstyres
       BEVIDST IKKE i dark-blokkene — de er faste mørke hover-farver.
       ============================================================ */
    --btn-primary-hover: #1d4ed8;   /* hover for blå knapper m. hvid tekst */
    --btn-success-hover: #047857;   /* hover for grønne knapper m. hvid tekst */
    --btn-danger-hover: #b91c1c;    /* hover for røde knapper m. hvid tekst */

    /* ============================================================
       ALIASSER FOR HISTORISK UDEFINEREDE TOKENS (dark mode-audit).
       Disse navne bruges rundt om i sider/komponenter — enten med
       lyse hex-fallbacks (fallbacken vandt altid → mørk-på-mørk i
       dark) eller uden fallback (invalid). Definitionerne peger på
       kanoniske tokens, så de flipper korrekt med temaet.
       Langsigtet: migrér brugsstederne og slet aliasserne.
       ============================================================ */
    --text-primary: var(--tekst);
    --text-secondary: var(--mørk-grå);
    --text-muted: var(--mørk-grå);
    --primary: var(--sekundær);        /* tekst/kant-blå — IKKE navy-flade */
    --primary-dark: #1d4ed8;           /* invariant mørkeblå (hover/gradient-ende) */
    --admin-text: var(--tekst);
    --admin-text-muted: var(--mørk-grå);
    --admin-primary: var(--sekundær);
    --farve-tekst: var(--tekst);
    --farve-tekst-sekundaer: var(--mørk-grå);
    --farve-success: var(--success);
    --farve-fejl: var(--fejl);
    --farve-warning: var(--advarsel);
    --farve-danger: var(--fejl);
    --farve-kant: var(--border);
    --farve-baggrund: var(--surface-2);

    /* Danger color (alias — brug --fejl) */
    --color-danger: #dc2626;

    /* Background colors (alias — brug --baggrund / --surface-2) */
    --color-bg-light: #F5F7FA;

    color-scheme: light;
}

/* ====================================================================
   DARK MODE (UX task 08, ejer-beslutning D10 — udvidet 2026-06-13 med
   manuel toggle, profil-indstilling). To aktiveringsveje:
     1) AUTO (standard): følg systemtemaet via prefers-color-scheme nedenfor.
        Brugerens valg "Lyst" (html[data-theme="light"]) vinder over systemet.
     2) MANUELT MØRKT: html[data-theme="dark"] tvinger mørkt uanset system —
        sat server-side fra cookie 'nivoo_tema' (FOUC-frit), se tema_attribut().
   De to dark-blokke SKAL være identiske — vogtet af UiDarkModeToggleTest.
   ÉN token-kilde; ingen per-side dark-CSS (undtagelser i buttons.css).
   Tema-invarianter (hvid tekst på farvede knapper, mørke paneler, --hvid,
   --accent) overstyres bevidst IKKE.
   WCAG (2026-06-12): tekst/surface 14.4:1, sek.tekst 7.3:1, badge-par
   7.0–9.4:1, link-blå 5.0:1. Kendt kompromis: hvid på --sekundær-knap 3.7:1.
   ==================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* Kerne */
        --sekundær: #3b82f6;     /* lysnet ét trin: link-læsbarhed på mørkt */
        --lys-grå: #112030;
        --mørk-grå: #9fb2c8;
        --baggrund: #0b1521;
        --tekst: #f1f5f9;
        --background:
            linear-gradient(rgba(11, 21, 33, 0.97), rgba(11, 21, 33, 0.97)),
            url("/uploads/hero1.png");

        /* Semantiske flader */
        --surface: #122438;
        --surface-2: #0e1c2c;
        --border: #325577;

        /* Grå-skala — roller spejles (50-200 = mørke flader, 700-900 = lys tekst) */
        --gray-50: var(--slate-50);
        --gray-100: var(--slate-100);
        --gray-200: var(--slate-200);
        --gray-300: var(--slate-300);
        --gray-400: var(--slate-400);
        --gray-500: var(--slate-500);
        --gray-600: var(--slate-600);
        --gray-700: var(--slate-700);
        --gray-800: var(--slate-800);
        --gray-900: var(--slate-900);

        /* Slate-skala — samme spejling */
        --slate-50: #0e1c2c;
        --slate-100: #142539;
        --slate-200: #203951;
        --slate-300: #2e4863;
        --slate-400: #7689a0;
        --slate-500: #9aaabd;
        --slate-600: #b8c5d4;
        --slate-700: #d3dce6;
        --slate-800: #e6ecf2;
        --slate-900: #f4f7fa;

        /* Status-familier — tints bliver mørke flader, tekst-trin bliver lyse */
        --blue-50: #16263e;
        --blue-100: #1d3357;
        --blue-200: #21406b;
        --blue-300: #2b528a;
        --blue-400: #60a5fa;
        --blue-500: #3b82f6;
        --blue-700: #93c5fd;
        --blue-800: #bfdbfe;
        --blue-900: #dbeafe;
        --green-50: #0f2a1a;
        --green-100: #143626;
        --green-200: #16402d;
        --green-300: #1d4f38;
        --green-500: #34d399;
        --green-600: #10b981;
        --green-800: #86efac;
        --green-900: #a7f3d0;
        --red-50: #3b1518;
        --red-100: #48191d;
        --red-200: #5c2026;
        --red-300: #75292f;
        --red-500: #f87171;
        --red-700: #fca5a5;
        --red-800: #fecaca;
        --amber-50: #33240b;
        --amber-100: #42300e;
        --amber-200: #533c12;
        --amber-300: #654a16;
        --amber-500: #fbbf24;
        --amber-800: #fcd34d;
        --sky-100: #0e2d44;
        --sky-700: #7dd3fc;
        --violet-100: #2a1d51;
        --violet-500: #a78bfa;
        --violet-600: #8b5cf6;
        --violet-800: #c4b5fd;
        --orange-50: #331a0b;
        --orange-100: #42220e;
        --orange-800: #fdba74;

        /* Skygger (subtil) — opacitet op så de ses på mørk baggrund */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.55);
        --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.6);
        --skygge: var(--shadow-sm);

        /* Aliasser følger med */
        --color-border: #325577;
        --color-text: #f1f5f9;
        --color-text-light: #9fb2c8;
        --color-bg-light: #112030;
    }
}

/* Manuelt valgt mørkt — vinder over systemets lyse tema (cookie 'nivoo_tema').
   Token-kroppen er IDENTISK med @media-blokken ovenfor (UiDarkModeToggleTest
   vogter at de ikke driver fra hinanden). */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Kerne */
    --sekundær: #3b82f6;     /* lysnet ét trin: link-læsbarhed på mørkt */
    --lys-grå: #112030;
    --mørk-grå: #9fb2c8;
    --baggrund: #0b1521;
    --tekst: #f1f5f9;
    --background:
        linear-gradient(rgba(11, 21, 33, 0.97), rgba(11, 21, 33, 0.97)),
        url("/uploads/hero1.png");

    /* Semantiske flader */
    --surface: #122438;
    --surface-2: #0e1c2c;
    --border: #325577;

    /* Grå-skala — roller spejles (50-200 = mørke flader, 700-900 = lys tekst) */
    --gray-50: var(--slate-50);
    --gray-100: var(--slate-100);
    --gray-200: var(--slate-200);
    --gray-300: var(--slate-300);
    --gray-400: var(--slate-400);
    --gray-500: var(--slate-500);
    --gray-600: var(--slate-600);
    --gray-700: var(--slate-700);
    --gray-800: var(--slate-800);
    --gray-900: var(--slate-900);

    /* Slate-skala — samme spejling */
    --slate-50: #0e1c2c;
    --slate-100: #142539;
    --slate-200: #203951;
    --slate-300: #2e4863;
    --slate-400: #7689a0;
    --slate-500: #9aaabd;
    --slate-600: #b8c5d4;
    --slate-700: #d3dce6;
    --slate-800: #e6ecf2;
    --slate-900: #f4f7fa;

    /* Status-familier — tints bliver mørke flader, tekst-trin bliver lyse */
    --blue-50: #16263e;
    --blue-100: #1d3357;
    --blue-200: #21406b;
    --blue-300: #2b528a;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-700: #93c5fd;
    --blue-800: #bfdbfe;
    --blue-900: #dbeafe;
    --green-50: #0f2a1a;
    --green-100: #143626;
    --green-200: #16402d;
    --green-300: #1d4f38;
    --green-500: #34d399;
    --green-600: #10b981;
    --green-800: #86efac;
    --green-900: #a7f3d0;
    --red-50: #3b1518;
    --red-100: #48191d;
    --red-200: #5c2026;
    --red-300: #75292f;
    --red-500: #f87171;
    --red-700: #fca5a5;
    --red-800: #fecaca;
    --amber-50: #33240b;
    --amber-100: #42300e;
    --amber-200: #533c12;
    --amber-300: #654a16;
    --amber-500: #fbbf24;
    --amber-800: #fcd34d;
    --sky-100: #0e2d44;
    --sky-700: #7dd3fc;
    --violet-100: #2a1d51;
    --violet-500: #a78bfa;
    --violet-600: #8b5cf6;
    --violet-800: #c4b5fd;
    --orange-50: #331a0b;
    --orange-100: #42220e;
    --orange-800: #fdba74;

    /* Skygger (subtil) — opacitet op så de ses på mørk baggrund */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.6);
    --skygge: var(--shadow-sm);

    /* Aliasser følger med */
    --color-border: #325577;
    --color-text: #f1f5f9;
    --color-text-light: #9fb2c8;
    --color-bg-light: #112030;
}