/* Temaer – vælges af admin under Indstillinger → Udseende (html[data-tema]).
   Lys/mørk: html[data-mode] = auto | lys | mork. Egen farve: html[data-egen] + --egen.
   Hvert tema har lyse og mørke farver; statusfarver kommer fra app.css. */
:root[data-tema="fjord"] {
  --brand: #1e4f7a; --brand-2: #2a6297; --brand-soft: #e6eef6; --brand-line: #bfd2e6; --on-brand: #ffffff; --bg: #f1f4f7; --surface: #ffffff; --surface-2: #f7f9fb; --surface-3: #e9eef3; --line: #dde4eb; --line-2: #c9d3dd; --fg: #0f1b26; --fg-2: #33414f; --muted: #627284; --faint: #8b98a6;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --r-sm: 4px; --r: 6px; --r-lg: 10px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-tema="fjord"]:not([data-mode="lys"]) {
  --brand: #7fb0e0; --brand-2: #9cc3ea; --brand-soft: #142233; --brand-line: #23384f; --on-brand: #0b1622; --bg: #0c121a; --surface: #121a24; --surface-2: #17212d; --surface-3: #1d2836; --line: #253141; --line-2: #324154; --fg: #e6edf4; --fg-2: #c0ccd8; --muted: #8d9cad; --faint: #6a7889; color-scheme: dark;
}
}
:root[data-tema="fjord"][data-mode="mork"] {
  --brand: #7fb0e0; --brand-2: #9cc3ea; --brand-soft: #142233; --brand-line: #23384f; --on-brand: #0b1622; --bg: #0c121a; --surface: #121a24; --surface-2: #17212d; --surface-3: #1d2836; --line: #253141; --line-2: #324154; --fg: #e6edf4; --fg-2: #c0ccd8; --muted: #8d9cad; --faint: #6a7889; color-scheme: dark;
}
:root[data-tema="havn"] {
  --brand: #0a6670; --brand-2: #0f7c87; --brand-soft: #e2f1f2; --brand-line: #b3d9dc; --on-brand: #ffffff; --bg: #eef3f3; --surface: #ffffff; --surface-2: #f6f9f9; --surface-3: #e6eeee; --line: #d8e3e3; --line-2: #c3d3d3; --fg: #0d1d1f; --fg-2: #2f4447; --muted: #5d7477; --faint: #879b9d;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --r-sm: 8px; --r: 10px; --r-lg: 14px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-tema="havn"]:not([data-mode="lys"]) {
  --brand: #4fc1c9; --brand-2: #74d0d6; --brand-soft: #0f2a2c; --brand-line: #1b4447; --on-brand: #062022; --bg: #0a1314; --surface: #101b1c; --surface-2: #152324; --surface-3: #1b2c2d; --line: #22393a; --line-2: #2e4a4b; --fg: #e3efef; --fg-2: #bdd0d0; --muted: #89a3a4; --faint: #678081; color-scheme: dark;
}
}
:root[data-tema="havn"][data-mode="mork"] {
  --brand: #4fc1c9; --brand-2: #74d0d6; --brand-soft: #0f2a2c; --brand-line: #1b4447; --on-brand: #062022; --bg: #0a1314; --surface: #101b1c; --surface-2: #152324; --surface-3: #1b2c2d; --line: #22393a; --line-2: #2e4a4b; --fg: #e3efef; --fg-2: #bdd0d0; --muted: #89a3a4; --faint: #678081; color-scheme: dark;
}
:root[data-tema="espresso"] {
  --brand: #5b3a26; --brand-2: #714a32; --brand-soft: #f1e9e3; --brand-line: #dccabd; --on-brand: #ffffff; --bg: #f2efec; --surface: #ffffff; --surface-2: #f8f6f4; --surface-3: #ebe6e2; --line: #e0d9d3; --line-2: #cec4bc; --fg: #1c1410; --fg-2: #43362e; --muted: #76675d; --faint: #9d8f86;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --r-sm: 6px; --r: 8px; --r-lg: 12px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-tema="espresso"]:not([data-mode="lys"]) {
  --brand: #d3a07a; --brand-2: #e0b593; --brand-soft: #2e2018; --brand-line: #4a3527; --on-brand: #1f140d; --bg: #12100e; --surface: #1a1714; --surface-2: #201c18; --surface-3: #28231e; --line: #302a24; --line-2: #3e362f; --fg: #f0e9e3; --fg-2: #d2c6bc; --muted: #a39589; --faint: #7f7268; color-scheme: dark;
}
}
:root[data-tema="espresso"][data-mode="mork"] {
  --brand: #d3a07a; --brand-2: #e0b593; --brand-soft: #2e2018; --brand-line: #4a3527; --on-brand: #1f140d; --bg: #12100e; --surface: #1a1714; --surface-2: #201c18; --surface-3: #28231e; --line: #302a24; --line-2: #3e362f; --fg: #f0e9e3; --fg-2: #d2c6bc; --muted: #a39589; --faint: #7f7268; color-scheme: dark;
}
:root[data-tema="bordeaux"] {
  --brand: #7b1e3b; --brand-2: #922847; --brand-soft: #f6e7ec; --brand-line: #e6c0cc; --on-brand: #ffffff; --bg: #f5f2f3; --surface: #ffffff; --surface-2: #faf8f9; --surface-3: #efe9eb; --line: #e5dde0; --line-2: #d4c8cd; --fg: #1d1216; --fg-2: #45343a; --muted: #79656c; --faint: #a08f95;
  --font: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif; --r-sm: 6px; --r: 8px; --r-lg: 12px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-tema="bordeaux"]:not([data-mode="lys"]) {
  --brand: #e48aa6; --brand-2: #eda3ba; --brand-soft: #33131e; --brand-line: #561f32; --on-brand: #2a0814; --bg: #140d10; --surface: #1c1418; --surface-2: #22191d; --surface-3: #2a1f24; --line: #33262c; --line-2: #44323a; --fg: #f3e8ec; --fg-2: #d6c4cb; --muted: #a8919a; --faint: #826e76; color-scheme: dark;
}
}
:root[data-tema="bordeaux"][data-mode="mork"] {
  --brand: #e48aa6; --brand-2: #eda3ba; --brand-soft: #33131e; --brand-line: #561f32; --on-brand: #2a0814; --bg: #140d10; --surface: #1c1418; --surface-2: #22191d; --surface-3: #2a1f24; --line: #33262c; --line-2: #44323a; --fg: #f3e8ec; --fg-2: #d6c4cb; --muted: #a8919a; --faint: #826e76; color-scheme: dark;
}
:root[data-tema="kontrast"] {
  --brand: #000000; --brand-2: #262626; --brand-soft: #ebebeb; --brand-line: #000000; --on-brand: #ffffff; --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f5f5; --surface-3: #ebebeb; --line: #8a8a8a; --line-2: #4d4d4d; --fg: #000000; --fg-2: #111111; --muted: #2e2e2e; --faint: #4d4d4d;
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif; --r-sm: 4px; --r: 4px; --r-lg: 6px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-tema="kontrast"]:not([data-mode="lys"]) {
  --brand: #ffe600; --brand-2: #fff066; --brand-soft: #2b2600; --brand-line: #ffe600; --on-brand: #000000; --bg: #000000; --surface: #0a0a0a; --surface-2: #141414; --surface-3: #1f1f1f; --line: #6b6b6b; --line-2: #a3a3a3; --fg: #ffffff; --fg-2: #f2f2f2; --muted: #d6d6d6; --faint: #b3b3b3; color-scheme: dark;
}
}
:root[data-tema="kontrast"][data-mode="mork"] {
  --brand: #ffe600; --brand-2: #fff066; --brand-soft: #2b2600; --brand-line: #ffe600; --on-brand: #000000; --bg: #000000; --surface: #0a0a0a; --surface-2: #141414; --surface-3: #1f1f1f; --line: #6b6b6b; --line-2: #a3a3a3; --fg: #ffffff; --fg-2: #f2f2f2; --muted: #d6d6d6; --faint: #b3b3b3; color-scheme: dark;
}
/* Kontrast: tydeligere statusfarver og kanter */
:root[data-tema="kontrast"] { --ok: #006b2b; --warn: #8a4a00; --bad: #a30f0f; --info: #0039b3; --shadow-1: none; --shadow-2: 0 0 0 1px #000; }
:root[data-tema="kontrast"] .btn, :root[data-tema="kontrast"] .input, :root[data-tema="kontrast"] input, :root[data-tema="kontrast"] select { border-width: 2px; }
/* Egen farve (kundens brand). Lyse og mørke varianter blandes ud fra én farve. */
:root[data-egen] { --brand: var(--egen); --brand-2: color-mix(in srgb, var(--egen) 82%, #000); --brand-soft: color-mix(in srgb, var(--egen) 11%, var(--surface)); --brand-line: color-mix(in srgb, var(--egen) 32%, var(--surface)); --on-brand: var(--egen-paa, #fff); }
@media (prefers-color-scheme: dark) {
  :root[data-egen]:not([data-mode="lys"]) { --brand: color-mix(in srgb, var(--egen) 62%, #fff); --brand-2: color-mix(in srgb, var(--egen) 50%, #fff); --brand-soft: color-mix(in srgb, var(--egen) 22%, var(--surface)); --brand-line: color-mix(in srgb, var(--egen) 40%, var(--surface)); --on-brand: #0b0b0b; }
}
:root[data-egen][data-mode="mork"] { --brand: color-mix(in srgb, var(--egen) 62%, #fff); --brand-2: color-mix(in srgb, var(--egen) 50%, #fff); --brand-soft: color-mix(in srgb, var(--egen) 22%, var(--surface)); --brand-line: color-mix(in srgb, var(--egen) 40%, var(--surface)); --on-brand: #0b0b0b; }