/* Mörkt läge – mall.
   Bara tokens ändras här; komponenternas CSS använder variablerna och följer med. Laddas efter classical.css.
   Läget sätts av wwwroot/js/theme.js som data-theme="dark" på <html>.

   Riktlinjer för temat: mjukt, inte svartaktigt. Bakgrunden är en varm mörkgrå (inte #000), texten är en
   dämpad benvit (inte #fff) och accenten är något ljusare och mindre mättad än i ljust läge, så att den
   inte lyser. Gråskalan och accentrampen är speglade: steg 100 är det mörkaste, 900 det ljusaste, så att
   komponenter som använder "neutral-700" för dämpad text eller "accent-100" som taggbakgrund fungerar oförändrat. */

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #292725;
  --color-surface: #33312e;
  --color-text: #e6e2db;
  --color-accent: #c9993f;
  --color-accent-2: #bf9650;
  --color-divider: color-mix(in srgb, #e6e2db 16%, transparent);
  --color-danger: #e08a78;

  --color-neutral-100: #302e2c;
  --color-neutral-200: #3a3836;
  --color-neutral-300: #4a4745;
  --color-neutral-400: #625f5c;
  --color-neutral-500: #7f7b78;
  --color-neutral-600: #9a9693;
  --color-neutral-700: #b3afab;
  --color-neutral-800: #cdc9c4;
  --color-neutral-900: #e4e0da;

  --color-accent-100: #3d3220;
  --color-accent-200: #4a3c25;
  --color-accent-300: #5f4b2c;
  --color-accent-400: #8a6a36;
  --color-accent-500: #b08a48;
  --color-accent-600: #c79f5a;
  --color-accent-700: #dbb36e;
  --color-accent-800: #ebcb92;
  --color-accent-900: #f5e1bd;

  --color-accent-2-100: #3d3220;
  --color-accent-2-200: #4a3c25;
  --color-accent-2-300: #5f4b2c;
  --color-accent-2-400: #84663a;
  --color-accent-2-500: #a98649;
  --color-accent-2-600: #bf9a5c;
  --color-accent-2-700: #d3b073;
  --color-accent-2-800: #e4c898;
  --color-accent-2-900: #f1ddbc;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-md: 0 3px 10px rgb(0 0 0 / 34%);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 42%);
}

/* Bilder och illustrationer: dämpa så att de inte lyser mot den mörka bakgrunden. */
:root[data-theme="dark"] .plate { filter: sepia(0.22) saturate(0.8) contrast(1.02) brightness(0.86); }
:root[data-theme="dark"] .auth-hero img { filter: invert(0.88) hue-rotate(180deg) saturate(0.85); }