/* Bifrost – temaer.

   Hvert tema er en klasse som setter fargevariablene alt annet bygger på.
   Klassen ligger normalt på <body>, men fungerer på et hvilket som helst
   element — det er slik forhåndsvisningene i temavelgeren kan vise flere
   temaer side om side på samme side. Ikke gjør dem body-spesifikke.

   Katalogen over temaer ligger i app/themes.py. Legger du til et tema må
   begge oppdateres.

   Variablene, kort forklart:

     --bg / --bg-glow      sidebakgrunn og det svake lysskjæret over den
     --surface             flate som ligger over bakgrunnen (kort, paneler)
     --surface-2           samme flate, hevet ett hakk (hover, valgt rad)
     --surface-inset       flate som ligger *under* (input, kodefelt)
     --border              vanlig strek
     --border-strong       strek som skal ses, f.eks. rundt en valgt ting
     --text / --muted      brødtekst og sekundærtekst
     --faint               tekst som nesten ikke skal merkes (tidsstempler)
     --accent              merkefargen; --accent-contrast er tekst oppå den
     --accent-soft         merkefargen som bakgrunnsflate
     --ok / --warn / --danger   status, med -soft-variant til bakgrunn

   `--card` og `--card-border` er beholdt som aliaser fordi de brukes flere
   steder fra før; nye regler bør bruke --surface og --border. */

/* ---- Nordlys (standard, mørk) ---- */
.theme-nordlys {
  --bg: #070c16;
  --bg-glow: radial-gradient(ellipse 70% 50% at 75% -15%, rgba(45, 212, 191, .13), transparent 70%),
             radial-gradient(ellipse 55% 45% at 12% 108%, rgba(74, 222, 128, .07), transparent 70%);
  --surface: #0f1724;
  --surface-2: #16202f;
  --surface-inset: #0a111c;
  --border: rgba(148, 173, 200, .13);
  --border-strong: rgba(148, 173, 200, .26);
  --text: #e8eef6;
  --muted: #94a7bd;
  --faint: #61748c;
  --accent: #2dd4bf;
  --accent-contrast: #04211d;
  --accent-soft: rgba(45, 212, 191, .13);
  --accent-2: #4ade80;
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, .13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .13);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .13);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7);
}

/* ---- Midnatt (mørk) ---- */
.theme-midnatt {
  --bg: #0a0718;
  --bg-glow: radial-gradient(ellipse 65% 50% at 80% -15%, rgba(129, 140, 248, .16), transparent 70%),
             radial-gradient(ellipse 55% 45% at 8% 108%, rgba(192, 132, 252, .09), transparent 70%);
  --surface: #15122a;
  --surface-2: #1d1937;
  --surface-inset: #0f0d20;
  --border: rgba(167, 176, 240, .14);
  --border-strong: rgba(167, 176, 240, .28);
  --text: #e7e9ff;
  --muted: #a3a9d8;
  --faint: #6f74a8;
  --accent: #8b93fa;
  --accent-contrast: #0b0d26;
  --accent-soft: rgba(139, 147, 250, .15);
  --accent-2: #c084fc;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .13);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .13);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .72);
}

/* ---- Skog (mørk) ---- */
.theme-skog {
  --bg: #0a1310;
  --bg-glow: radial-gradient(ellipse 70% 50% at 75% -15%, rgba(134, 239, 172, .10), transparent 70%),
             radial-gradient(ellipse 50% 45% at 12% 108%, rgba(202, 138, 4, .07), transparent 70%);
  --surface: #121e18;
  --surface-2: #1a2921;
  --surface-inset: #0d1713;
  --border: rgba(163, 205, 176, .14);
  --border-strong: rgba(163, 205, 176, .28);
  --text: #e2f1e6;
  --muted: #97b7a1;
  --faint: #67836f;
  --accent: #58d98a;
  --accent-contrast: #04200f;
  --accent-soft: rgba(88, 217, 138, .13);
  --accent-2: #eab308;
  --ok: #58d98a;
  --ok-soft: rgba(88, 217, 138, .13);
  --warn: #eab308;
  --warn-soft: rgba(234, 179, 8, .14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .13);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .68);
}

/* ---- Solnedgang (mørk) ---- */
.theme-solnedgang {
  --bg: #150a0e;
  --bg-glow: radial-gradient(ellipse 72% 52% at 72% -15%, rgba(251, 113, 133, .16), transparent 70%),
             radial-gradient(ellipse 55% 45% at 12% 108%, rgba(251, 146, 60, .10), transparent 70%);
  --surface: #22131a;
  --surface-2: #2d1b23;
  --surface-inset: #1a0e14;
  --border: rgba(253, 186, 116, .15);
  --border-strong: rgba(253, 186, 116, .30);
  --text: #fde9e0;
  --muted: #d3a595;
  --faint: #9c7466;
  --accent: #fb7185;
  --accent-contrast: #2b060d;
  --accent-soft: rgba(251, 113, 133, .15);
  --accent-2: #fb923c;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .14);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7);
}

/* ---- Galakse (mørk) ---- */
.theme-galakse {
  --bg: #120826;
  --bg-glow: radial-gradient(ellipse 70% 52% at 78% -15%, rgba(139, 92, 246, .20), transparent 70%),
             radial-gradient(ellipse 55% 45% at 8% 108%, rgba(125, 211, 252, .08), transparent 70%);
  --surface: #1d1138;
  --surface-2: #271847;
  --surface-inset: #170d2d;
  --border: rgba(178, 153, 250, .16);
  --border-strong: rgba(178, 153, 250, .34);
  --text: #efe9ff;
  --muted: #aa9dd4;
  --faint: #776ba3;
  --accent: #a78bfa;
  --accent-contrast: #180a33;
  --accent-soft: rgba(167, 139, 250, .16);
  --accent-2: #7dd3fc;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .13);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .13);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .72);
}

/* ---- Daggry (lys) ---- */
.theme-daggry {
  --bg: #fbf6f0;
  --bg-glow: radial-gradient(ellipse 70% 50% at 78% -15%, rgba(251, 146, 60, .14), transparent 70%),
             radial-gradient(ellipse 50% 45% at 8% 108%, rgba(253, 224, 71, .16), transparent 70%);
  --surface: #ffffff;
  --surface-2: #f6efe6;
  --surface-inset: #f7f1e9;
  --border: rgba(120, 90, 60, .16);
  --border-strong: rgba(120, 90, 60, .32);
  --text: #33281e;
  --muted: #7c6b58;
  --faint: #a4937f;
  --accent: #d96a2b;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(217, 106, 43, .11);
  --accent-2: #ca8a04;
  --ok: #15803d;
  --ok-soft: rgba(21, 128, 61, .10);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, .10);
  --danger: #c92a2a;
  --danger-soft: rgba(201, 42, 42, .09);
  --shadow: 0 1px 2px rgba(120, 90, 60, .10), 0 8px 24px -10px rgba(120, 90, 60, .28);
  --shadow-lg: 0 24px 60px -14px rgba(120, 90, 60, .34);
}

/* ---- Fjord (lys) ---- */
.theme-fjord {
  --bg: #f3f7fa;
  --bg-glow: radial-gradient(ellipse 70% 50% at 78% -15%, rgba(56, 189, 248, .14), transparent 70%),
             radial-gradient(ellipse 50% 45% at 8% 108%, rgba(45, 212, 191, .12), transparent 70%);
  --surface: #ffffff;
  --surface-2: #eef4f8;
  --surface-inset: #f2f7fa;
  --border: rgba(45, 90, 120, .15);
  --border-strong: rgba(45, 90, 120, .30);
  --text: #16303e;
  --muted: #5a7788;
  --faint: #8aa2b0;
  --accent: #0a7ea4;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(10, 126, 164, .10);
  --accent-2: #0d9488;
  --ok: #0f766e;
  --ok-soft: rgba(15, 118, 110, .10);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, .10);
  --danger: #c92a2a;
  --danger-soft: rgba(201, 42, 42, .09);
  --shadow: 0 1px 2px rgba(40, 80, 110, .09), 0 8px 24px -10px rgba(40, 80, 110, .24);
  --shadow-lg: 0 24px 60px -14px rgba(40, 80, 110, .30);
}

/* Hvilken lyshet nettleseren skal tegne *sine egne* deler i: kalenderikonet
   i et datofelt, datovelgeren som spretter opp, rullefelt. Uten dette tegner
   den lyst uansett tema, og kalenderikonet i et mørkt felt blir mørkt på
   mørkt. Følger temaets egen lyshet — `dark`-flagget i app/themes.py. */
.theme-nordlys, .theme-midnatt, .theme-skog, .theme-solnedgang, .theme-galakse { color-scheme: dark; }
.theme-daggry, .theme-fjord { color-scheme: light; }


/* Bakoverkompatible aliaser. Eldre regler bruker disse navnene. */
.theme-nordlys, .theme-midnatt, .theme-skog,
.theme-daggry, .theme-fjord, .theme-solnedgang, .theme-galakse {
  --card: var(--surface);
  --card-border: var(--border);
  --text-muted: var(--muted);
  --input-bg: var(--surface-inset);
}