/* ---------- Temaer med bakgrunnsbilde ----------
   Grunnfargene står i app.css. Temaene under (Lilla er standard, Krystall kan velges) legger et bilde bak hele programmet og gjør panelene
   til halvgjennomsiktig glass. Fargene settes som variabler, så resten av CSS-en virker uendret.
   Valget ligger på <html data-theme="…"> og velges under Innstillinger → Utseende. */

:root[data-theme="lilla"] {
  --bg-image: url('/bg/lilla.jpg');
  --bg-veil: linear-gradient(180deg, rgb(12 4 22 / .42) 0%, rgb(12 4 22 / .58) 45%, rgb(8 2 14 / .86) 100%);
  --canvas: rgb(14 6 24 / .46);
  --deep: rgb(10 4 18 / .78);
  --surface: rgb(26 12 40 / .56);
  --surface-2: rgb(70 34 100 / .50);
  --surface-3: rgb(110 56 150 / .50);
  --glass-solid: rgb(24 10 36 / .92);
  --ink: #F7EEFF;
  --muted: #DCD1E9; /* lysere og mindre lilla enn bakgrunnen, så teksten skiller seg fra den */
  --line: rgb(255 255 255 / .11);
  --edge: rgb(255 170 240 / .16);
  --accent: #FF7AD9;
  --accent-ink: #2A0222;
  --accent-glow: rgb(255 110 210 / .5);
  --btn: linear-gradient(135deg, #E23C9E 0%, #8A3CF0 100%);
  --btn-ink: #FFFFFF;
  --ok: #6EF2B5;
  --due: #FFB067;
  --due-bg: rgb(255 150 60 / .16);
  --published: #C3ABFF;
  --draft: #A795BD;
  --danger: #FF7B8A;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Sora', 'Manrope', system-ui, sans-serif;
}

:root[data-theme="krystall"] {
  --bg-image: url('/bg/krystall.jpg');
  --bg-veil: linear-gradient(180deg, rgb(3 6 12 / .40) 0%, rgb(3 6 12 / .56) 45%, rgb(2 4 8 / .86) 100%);
  --canvas: rgb(4 8 15 / .48);
  --deep: rgb(3 6 12 / .80);
  --surface: rgb(9 15 26 / .60);
  --surface-2: rgb(34 50 76 / .55);
  --surface-3: rgb(56 78 112 / .55);
  --glass-solid: rgb(8 13 22 / .93);
  --ink: #EDF4FF;
  --muted: #C9D2DF; /* lysere og mindre blå enn bakgrunnen, så teksten skiller seg fra krystallene */
  --line: rgb(160 200 255 / .12);
  --edge: rgb(160 205 255 / .17);
  --accent: #FF8A3D;
  --accent-ink: #1E0A00;
  --accent-glow: rgb(255 120 50 / .5);
  --btn: linear-gradient(135deg, #FF7A35 0%, #E5293F 100%);
  --btn-ink: #FFFFFF;
  --ok: #72E6B0;
  --due: #FFB05C;
  --due-bg: rgb(255 140 50 / .15);
  --published: #9CC8FF;
  --draft: #8B9BB3;
  --danger: #FF7480;
  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Chakra Petch', 'Barlow', system-ui, sans-serif;
}

/* Bildet ligger fast bak alt, med et mørkt slør så tekst alltid er lesbar. */
:root[data-theme="lilla"] body, :root[data-theme="krystall"] body {
  background-color: #07040C;
  background-image: var(--bg-veil), var(--bg-image);
  background-size: cover; background-position: center; background-attachment: fixed;
}
:root[data-theme="krystall"] body { background-color: #03060C; }
:root[data-theme="lilla"] ::selection { background: rgb(255 122 217 / .35); }
:root[data-theme="krystall"] ::selection { background: rgb(255 138 61 / .35); }

/* Glass: panelene får uskarp bakgrunn og en tynn lys kant. */
:root:is([data-theme="lilla"], [data-theme="krystall"]) :is(.home section, .stat-card, .chart-card, .stat-top, .acct-tiles .tile, .month, .list section, .wcol, .due-banner, .stats-bar .segmented, .toolbar .segmented, .btn-gear, .btn-back) {
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
:root[data-theme="lilla"] :is(.home section, .stat-card, .chart-card, .stat-top, .acct-tiles .tile),
:root[data-theme="krystall"] :is(.home section, .stat-card, .chart-card, .stat-top, .acct-tiles .tile) {
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 18px 40px -20px rgb(0 0 0 / .6);
}
:root[data-theme="lilla"] .stat-top, :root[data-theme="krystall"] .stat-top { background: var(--surface); border-radius: 14px; padding: 14px 16px; }
:root[data-theme="lilla"] .list section, :root[data-theme="krystall"] .list section { background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; padding: 14px 16px; }
:root[data-theme="lilla"] .month, :root[data-theme="krystall"] .month { background: var(--canvas); border-radius: 14px; padding: 6px; border: 1px solid var(--edge); }
:root[data-theme="lilla"] .dow, :root[data-theme="krystall"] .dow { background: transparent; }
:root[data-theme="lilla"] .day, :root[data-theme="krystall"] .day { border-color: var(--line); }
:root[data-theme="lilla"] .wcol, :root[data-theme="krystall"] .wcol { background: var(--canvas); border: 1px solid var(--line); }

/* Hovedknappene får en fargeovergang; aktive faner og «i dag» lyser i temafargen. */
:root[data-theme="lilla"] .btn-primary, :root[data-theme="krystall"] .btn-primary {
  background: var(--btn); color: var(--btn-ink); border: 0;
  box-shadow: 0 6px 22px -8px var(--accent-glow), inset 0 1px 0 rgb(255 255 255 / .25);
}
:root[data-theme="lilla"] .btn-primary:hover, :root[data-theme="krystall"] .btn-primary:hover { filter: brightness(1.1) saturate(1.05); }
:root[data-theme="lilla"] .btn-ghost, :root[data-theme="krystall"] .btn-ghost { background: rgb(255 255 255 / .04); border-color: var(--edge); }
:root[data-theme="lilla"] .btn-ghost:hover, :root[data-theme="krystall"] .btn-ghost:hover { background: rgb(255 255 255 / .10); }
:root[data-theme="lilla"] .segmented button[aria-selected="true"], :root[data-theme="krystall"] .segmented button[aria-selected="true"],
:root[data-theme="lilla"] .lang-switch button[aria-pressed="true"], :root[data-theme="krystall"] .lang-switch button[aria-pressed="true"] {
  background: rgb(255 255 255 / .12); box-shadow: inset 0 -2px 0 var(--accent);
}
:root[data-theme="lilla"] .day.today, :root[data-theme="krystall"] .day.today {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), var(--surface) 60%);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
:root[data-theme="lilla"] .home .home-next, :root[data-theme="krystall"] .home .home-next {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%, var(--surface) 55%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 24px 60px -28px var(--accent-glow);
}
:root[data-theme="lilla"] .hn-count {
  background: linear-gradient(90deg, #FF8BDF, #B98BFF); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgb(255 110 210 / .35));
}
:root[data-theme="krystall"] .hn-count {
  background: linear-gradient(90deg, #FFB067, #FF5A4D); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgb(255 110 50 / .35));
}

/* Dialoger: nesten tett glass, så skjemaet er lett å lese. */
:root[data-theme="lilla"] dialog, :root[data-theme="krystall"] dialog {
  background: var(--glass-solid); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
:root[data-theme="lilla"] dialog::backdrop { background: rgb(10 2 18 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
:root[data-theme="krystall"] dialog::backdrop { background: rgb(2 5 10 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
:root[data-theme="lilla"] .chart-tip, :root[data-theme="krystall"] .chart-tip { background: var(--glass-solid); border-color: var(--edge); }
:root[data-theme="lilla"] .toast, :root[data-theme="krystall"] .toast { background: var(--glass-solid); color: var(--ink); border: 1px solid var(--edge); }

/* Skriftene i de nye temaene er bredere enn Saira Condensed, så overskrifter og tall gjøres litt mindre. */
:root[data-theme="lilla"], :root[data-theme="krystall"] { --tight: -0.02em; }
:root[data-theme="lilla"] :is(.brand) , :root[data-theme="krystall"] :is(.brand) { font-size: 21px; letter-spacing: var(--tight); }
:root[data-theme="lilla"] :is(.title, .home-hello h1, .acct-head h1), :root[data-theme="krystall"] :is(.title, .home-hello h1, .acct-head h1) { font-size: 30px; letter-spacing: var(--tight); }
:root[data-theme="lilla"] .hn-count, :root[data-theme="krystall"] .hn-count { font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.03em; line-height: 1.02; }
:root[data-theme="lilla"] :is(.home h2, .stat-top h2, .list h2, .editor-head h2), :root[data-theme="krystall"] :is(.home h2, .stat-top h2, .list h2, .editor-head h2) { font-size: 19px; letter-spacing: var(--tight); }
:root[data-theme="lilla"] :is(.chart-h h3, .stat-head strong, .ig-panel h3, .hn-when), :root[data-theme="krystall"] :is(.chart-h h3, .stat-head strong, .ig-panel h3, .hn-when) { font-size: 17px; }
:root[data-theme="lilla"] :is(.tile-v, .ha-num), :root[data-theme="krystall"] :is(.tile-v, .ha-num) { font-size: 22px; letter-spacing: var(--tight); }
:root[data-theme="lilla"] .acct-tiles .tile-v, :root[data-theme="krystall"] .acct-tiles .tile-v { font-size: 26px; }
:root[data-theme="lilla"] :is(.num, .fx-date .d), :root[data-theme="krystall"] :is(.num, .fx-date .d) { font-size: 19px; letter-spacing: var(--tight); }
:root[data-theme="lilla"] .whead .num, :root[data-theme="krystall"] .whead .num { font-size: 26px; }
:root[data-theme="lilla"] :is(.fx-time, .card .time, .hw-post .time, .st-rank), :root[data-theme="krystall"] :is(.fx-time, .card .time, .hw-post .time, .st-rank) { font-size: 15px; }
:root[data-theme="krystall"] :is(.brand, .title, .home-hello h1, .acct-head h1, .home h2, .stat-top h2, .list h2, .chart-h h3) { text-transform: none; font-weight: 700; }

@media (max-width: 860px) {
  :root[data-theme="lilla"] body, :root[data-theme="krystall"] body { background-attachment: scroll; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="lilla"] { --surface: rgb(26 12 40 / .94); --canvas: rgb(14 6 24 / .9); }
  :root[data-theme="krystall"] { --surface: rgb(9 15 26 / .94); --canvas: rgb(4 8 15 / .9); }
}

/* Velgeren under Innstillinger → Utseende */
.theme-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-pick button {
  display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; border-radius: 10px; cursor: pointer;
  background: var(--canvas); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 13px; text-align: center;
}
.theme-pick button[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-pick .sw { display: block; aspect-ratio: 16 / 9; border-radius: 6px; background-size: cover; background-position: center; }
.sw-lilla { background-image: url('/bg/lilla.jpg'); }
.sw-krystall { background-image: url('/bg/krystall.jpg'); }

/* Tekst som ligger rett på bakgrunnsbildet får en myk skygge, så den ikke flyter inn i bildet. */
:root:is([data-theme="lilla"], [data-theme="krystall"]) :is(.ws-page > h1, .ws-page > .muted, .home-hello) { text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 2px 14px rgb(0 0 0 / .6); }