/**
 * Felles fargetema – standardpalett
 *
 * To parallelle token-sett (samme palett, ulike formater):
 *   --token       hex/rgba under [data-theme] – bruk var(--token) direkte
 *   --token-rgb   RGB-triplets – bruk rgb(var(--token-rgb)) eller rgb(var(--token-rgb) / α)
 *
 * :root er lys reserve (triplet på --token og --token-rgb) for sider uten data-theme.
 * [data-theme="light"|"dark"] setter hex på --token og triplet på --token-rgb; hver av dem
 * definerer ALLE tokens :root har, så mørk modus aldri arver lyse verdier fra :root.
 * --shadow, --shadow-hover og --shadow-xl er alltid FULLE box-shadow-verdier (xl er tydeligst, til skuffer og
 * flytende lag); --shadow-strong er farge (brukes som «0 4px 16px var(--shadow-strong)»). Palettene følger samme kontrakt.
 *
 * Brytepunkter: hele appen bruker to tall, og de er dokumentert HER.
 *   --ds1-bryt-smal     640   telefon: kortmodus, stabling, slide-in i full bredde, én kolonne
 *   --ds1-bryt-middels  900   nettbrett: sidemenyen skjules, bunnmenyen vises, tabellen
 *                             går til auto-layout med rulling
 * Tokenene under :root er tall uten enhet, til lesing fra JS (getComputedStyle) og
 * dokumentasjon; @media kan ikke lese var(). Derfor står tallet i klartekst i hver
 * regel, i nøyaktig én form:
 *   @media (max-width: 640px)  /  @media (min-width: 641px)
 *   @media (max-width: 900px)  /  @media (min-width: 901px)
 * Aldri 639.98, 639, 899.98, 768, 480 eller andre tall. JS leser MOBILE_MQ og
 * SMAL_MENY_MQ fra ShellLayout (shell-layout.js) eller gjentar samme streng med
 * en kommentar som peker hit. jaktleder/tools/prove-brytepunkt.php finner avvik.
 */

/* ========== :root (RGB triplets, lys reserve) ========== */

:root {
    /* Brytepunkter i px, uten enhet. Kontrakten står i filhodet. */
    --ds1-bryt-smal: 640;
    --ds1-bryt-middels: 900;
    --bg: 255 255 255;
    --bg-rgb: 255 255 255;
    --fg: 9 9 11;
    --fg-rgb: 9 9 11;
    --card: 244 244 245;
    --card-rgb: 244 244 245;
    --card-fg: 9 9 11;
    --card-fg-rgb: 9 9 11;
    --border: 228 228 231;
    --border-rgb: 228 228 231;
    --border-strong: 212 212 216;
    --border-strong-rgb: 212 212 216;
    --border-hover: 161 161 170;
    --border-hover-rgb: 161 161 170;
    --input-bg: rgba(0,0,0,0.04);
    --muted: 244 244 245;
    --muted-rgb: 244 244 245;
    --muted-fg: 113 113 122;
    --muted-fg-rgb: 113 113 122;
    --subtle-fg: 39 39 42;
    --subtle-fg-rgb: 39 39 42;
    --dim-fg: 161 161 170;
    --dim-fg-rgb: 161 161 170;
    --primary: 37 99 235;
    --primary-rgb: 37 99 235;
    --primary-hover: 29 78 216;
    --primary-hover-rgb: 29 78 216;
    --primary-fg: 255 255 255;
    --primary-fg-rgb: 255 255 255;
    --destructive: 220 38 38;
    --destructive-rgb: 220 38 38;
    --success: 22 163 74;
    --success-rgb: 22 163 74;
    --warning: 217 119 6;
    --warning-rgb: 217 119 6;
    --hover-bg: rgba(0,0,0,0.04);
    --hover-bg-subtle: rgba(0,0,0,0.02);
    --overlay-bg: rgba(0,0,0,0.4);
    --overlay-bg-light: rgba(0,0,0,0.25);
    --card-alpha: rgba(244,244,245,0.7);
    --card-alpha-strong: rgba(244,244,245,0.9);
    --border-alpha: rgba(228,228,231,0.6);
    --border-alpha-light: rgba(228,228,231,0.4);
    --primary-alpha: rgba(37,99,235,0.08);
    --primary-alpha-strong: rgba(37,99,235,0.15);
    --destructive-alpha: rgba(220,38,38,0.08);
    --destructive-alpha-strong: rgba(220,38,38,0.15);
    --success-alpha: rgba(22,163,74,0.08);
    --success-alpha-strong: rgba(22,163,74,0.15);
    --warning-alpha: rgba(217,119,6,0.08);
    --shadow: 0 1.6px 3.6px rgba(0,0,0,0.08), 0 0.3px 0.9px rgba(0,0,0,0.06);
    --shadow-hover: 0 6.4px 14.4px rgba(0,0,0,0.08), 0 1.2px 3.6px rgba(0,0,0,0.15);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
    --shadow-strong: rgba(0,0,0,0.15);
    --header-bg: rgb(var(--bg-rgb));
    --scrollbar-thumb: #d4d4d8;
    --scrollbar-thumb-hover: #a1a1aa;
    --radial-bg: rgba(219,234,254,0.22);
    /* Sekundær glød (bunn/hjørne) i lyst tema */
    --radial-bg-accent: rgba(37, 99, 235, 0.095);
    --code-bg: rgba(0,0,0,0.04);
    color-scheme: light;
    /* Bro til komponenter som forventer Format 2-variabler (profilmeny m.m.) når kun Format 1 brukes */
    --radius: 6px;
    --text: rgb(var(--fg-rgb));
    --text-muted: rgb(var(--muted-fg-rgb));
    --card-bg: rgb(var(--card-rgb));
    --border-color: rgb(var(--border-rgb));
    --primary-ui: rgb(var(--primary-rgb));
}

/* ========== [data-theme]: hex for var(--x), triplets på --x-rgb ========== */

[data-theme="light"] {
    --bg: #ffffff;
    --bg-rgb: 255 255 255;
    --fg-rgb: 9 9 11;
    --fg: #09090b;
    --card-rgb: 244 244 245;
    --card: #f4f4f5;
    --card-fg-rgb: 9 9 11;
    --card-fg: #09090b;
    --border-rgb: 228 228 231;
    --border-strong-rgb: 212 212 216;
    --border-strong: #d4d4d8;
    --border-hover-rgb: 161 161 170;
    --border-hover: #a1a1aa;
    --muted-rgb: 244 244 245;
    --muted: #f4f4f5;
    --muted-fg-rgb: 113 113 122;
    --muted-fg: #71717a;
    --subtle-fg-rgb: 39 39 42;
    --subtle-fg: #27272a;
    --dim-fg-rgb: 161 161 170;
    --dim-fg: #a1a1aa;
    --primary-rgb: 37 99 235;
    --primary-hover-rgb: 29 78 216;
    --primary-hover: #1d4ed8;
    --primary-fg-rgb: 255 255 255;
    --primary-fg: #ffffff;
    --destructive-rgb: 220 38 38;
    --destructive: #dc2626;
    --success-rgb: 22 163 74;
    --success: #16a34a;
    --warning-rgb: 217 119 6;
    --warning: #d97706;
    --card-bg: #f4f4f5;
    --card-alpha: rgba(244,244,245,0.7);
    --border-alpha: rgba(228,228,231,0.6);
    --text: #09090b;
    --text-muted: #71717a;
    --border: #e4e4e7;
    --border-color: var(--border);
    --primary: #2563eb;
    --primary-ui: var(--primary);
    --header-bg: #ffffff;
    --input-bg: #ffffff;
    --shadow: 0 1.6px 3.6px rgba(0,0,0,0.08), 0 0.3px 0.9px rgba(0,0,0,0.06);
    --shadow-hover: 0 6.4px 14.4px rgba(0,0,0,0.08), 0 1.2px 3.6px rgba(0,0,0,0.15);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
    --shadow-strong: rgba(0,0,0,0.15);
    --hover-bg: rgba(0,0,0,0.04);
    --hover-bg-subtle: rgba(0,0,0,0.02);
    --overlay-bg: rgba(0,0,0,0.4);
    --overlay-bg-light: rgba(0,0,0,0.25);
    --card-alpha-strong: rgba(244,244,245,0.9);
    --border-alpha-light: rgba(228,228,231,0.4);
    --primary-alpha: rgba(37,99,235,0.08);
    --primary-alpha-strong: rgba(37,99,235,0.15);
    --destructive-alpha: rgba(220,38,38,0.08);
    --destructive-alpha-strong: rgba(220,38,38,0.15);
    --success-alpha: rgba(22,163,74,0.08);
    --success-alpha-strong: rgba(22,163,74,0.15);
    --warning-alpha: rgba(217,119,6,0.08);
    --code-bg: rgba(0,0,0,0.04);
    --radius: 6px;
    --radial-bg: rgba(219,234,254,0.22);
    --radial-bg-accent: rgba(37, 99, 235, 0.095);
    --scrollbar-thumb: #d4d4d8;
    --scrollbar-thumb-hover: #a1a1aa;
}

[data-theme="dark"] {
    --bg: #09090b;
    --bg-rgb: 9 9 11;
    --fg-rgb: 250 250 250;
    --fg: #fafafa;
    --card-rgb: 30 30 35;
    --card: #1e1e23;
    --card-fg-rgb: 250 250 250;
    --card-fg: #fafafa;
    --border-rgb: 72 72 84;
    --border-strong-rgb: 63 63 70;
    --border-strong: #3f3f46;
    --border-hover-rgb: 82 82 91;
    --border-hover: #52525b;
    --muted-rgb: 22 22 26;
    --muted: #16161a;
    --muted-fg-rgb: 161 161 170;
    --muted-fg: #a1a1aa;
    --subtle-fg-rgb: 228 228 231;
    --subtle-fg: #e4e4e7;
    --dim-fg-rgb: 113 113 122;
    --dim-fg: #71717a;
    --primary-rgb: 59 130 246;
    --primary-hover-rgb: 37 99 235;
    --primary-hover: #2563eb;
    /* Jaktleder: mørk tekst på den lyse blåfargen i mørk modus: kontrast 5,4 mot #3b82f6 (hvit ga 3,5). */
    --primary-fg-rgb: 10 10 10;
    --primary-fg: #0a0a0a;
    --destructive-rgb: 239 68 68;
    --destructive: #ef4444;
    --success-rgb: 34 197 94;
    --success: #22c55e;
    --warning-rgb: 251 191 36;
    --warning: #fbbf24;
    --card-bg: #1e1e23;
    --card-alpha: rgba(30,30,35,0.82);
    --border-alpha: rgba(48,48,54,0.55);
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --border: #484854;
    --border-color: var(--border);
    --primary: #3b82f6;
    --primary-ui: var(--primary);
    --header-bg: #1e1e23;
    --input-bg: rgba(0,0,0,0.35);
    --shadow: 0 1.6px 3.6px rgba(0,0,0,0.3);
    --shadow-hover: 0 6.4px 14.4px rgba(0,0,0,0.5);
    --shadow-xl: 0 12px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
    --shadow-strong: rgba(0,0,0,0.5);
    --hover-bg: rgba(255,255,255,0.05);
    --hover-bg-subtle: rgba(255,255,255,0.03);
    --overlay-bg: rgba(0,0,0,0.7);
    --overlay-bg-light: rgba(0,0,0,0.5);
    --card-alpha-strong: rgba(30,30,35,0.92);
    --border-alpha-light: rgba(48,48,54,0.3);
    --primary-alpha: rgba(59,130,246,0.1);
    --primary-alpha-strong: rgba(59,130,246,0.2);
    --destructive-alpha: rgba(239,68,68,0.1);
    --destructive-alpha-strong: rgba(239,68,68,0.2);
    --success-alpha: rgba(34,197,94,0.1);
    --success-alpha-strong: rgba(34,197,94,0.2);
    --warning-alpha: rgba(251,191,36,0.1);
    --code-bg: rgba(0,0,0,0.35);
    --radius: 6px;
    --radial-bg: rgba(59, 130, 246, 0.15);
    --radial-bg-accent: transparent;
    --scrollbar-thumb: #3f3f46;
    --scrollbar-thumb-hover: #52525b;
    color-scheme: dark;   /* nettleserens rullefelt og kontroller i mørkt (LoadREG) */
}

/* ========== Anbefalt sidebakgrunn (dobbel radial + flat base) ==========
 * To lag over --bg gir mild «fargespill»; andre lag kan være transparent (kun topp-glød).
 * Format 1 (rgb-triplet --bg-rgb): bruk .ws-page-bg på <body>.
 * Format 2 (hex --bg): bruk .ws-page-bg-hex på <body> (krever [data-theme] på <html> eller arvet --bg).
 */
body.ws-page-bg {
    background:
        radial-gradient(ellipse 110% 68% at 50% 4%, var(--radial-bg) 0%, transparent 56%),
        radial-gradient(ellipse 125% 88% at 78% 96%, var(--radial-bg-accent) 0%, transparent 52%),
        rgb(var(--bg-rgb));
    background-attachment: fixed;
}

body.ws-page-bg-hex {
    background:
        radial-gradient(ellipse 110% 68% at 50% 4%, var(--radial-bg) 0%, transparent 56%),
        radial-gradient(ellipse 125% 88% at 78% 96%, var(--radial-bg-accent) 0%, transparent 52%),
        var(--bg);
    background-attachment: fixed;
}

/* ========== UI-skala (typografi og kontroller) ==========
 * --ui-font-scale (1 = 15px base) styres av font-scale.js / fargeskjema-slider.
 * html.ws-spa skalerer rem via font-size; tokens er rem basert på 16px rot.
 */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --ui-font-scale: 1;
    --ui-font-base: 0.9375rem;
    --ui-font-sm: var(--tt-ui-text, 0.875rem);  /* Jaktleder: én tekstskala også i Normal, som size.css gjør med data-ui-size; ttas 0.875rem */
    --ui-font-xs: 0.75rem;
    --ui-font-lg: 1.0625rem;
    --ui-font-xl: 1.25rem;
    --ui-control-pad-y: 0.5625rem;
    --ui-control-pad-x: 0.9375rem;
    --tap: 44px; /* berøringsflate, todo H6 */
    --ui-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

html.ws-spa {
    font-size: calc(16px * var(--ui-font-scale, 1));
}

/* Eldre komponenter (--color-*) skal følge det satte temaet, ikke hardkodet hvit. */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --color-bg: var(--card-bg);
    --color-text: var(--text);
    --color-text-muted: var(--text-muted);
    --color-text-subtle: var(--text-muted);
    --color-divider: var(--border);
    --color-divider-strong: var(--border);
    --color-border: var(--border);
    --color-accent: var(--primary);
    --color-accent-700: var(--primary);
    --color-surface: var(--input-bg);
    --color-danger: rgb(var(--destructive-rgb));
    --color-warning: rgb(var(--warning-rgb));
    --color-success: rgb(var(--success-rgb));
}