/* Säkerkoll — mörkt läge (opt-in). Ljust är standard.
   Aktiveras med html[data-theme="dark"] (sätts av det lilla head-skriptet på varje
   sida utifrån localStorage 'sk-theme', och togglas via knappen i menyn, pro-nav.js).
   Sidorna delar samma tokens i :root — här byts bara värdena, plus några
   hårdkodade färger (nav-bakgrund, Tailwind-klasser i community, kontomodalen). */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1a27;
  --bg-alt: #172539;
  --bg-deep: #1d2f47;
  --paper: #142033;
  --ink: #ebe6db;
  --ink-soft: #bcc4d0;
  --ink-mute: #8d97a6;
  --ink-faint: #5f6a7a;
  --line: rgba(235, 230, 219, 0.12);
  --line-strong: rgba(235, 230, 219, 0.26);
  --accent: #dd8462;
  --accent-deep: #c76a4a;
  --safe: #6fa383;
  --safe-deep: #94c7a6;
  --warn: #d4ae70;
  --danger: #e07a5f;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
/* pappersbrus-lagret (multiply-blend) blir svart smuts i mörkt → tona ner + byt blend */
html[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: 0.06; }
/* nav-bakgrunden är hårdkodad rgba(244,239,230,…) på sidorna */
html[data-theme="dark"] nav.top { background: rgba(15, 26, 39, 0.82); }
html[data-theme="dark"] .nav-links { background: transparent; }
@media (max-width: 1024px) {
  html[data-theme="dark"] nav.top, html[data-theme="dark"] .nav-links { background: var(--bg); }
}
html[data-theme="dark"] ::selection { background: var(--accent); color: #fff; }
html[data-theme="dark"] .logo-mark { border-color: var(--ink); }
html[data-theme="dark"] .logo-mark::after { background: var(--ink); }
/* Fyllda mörkblå element (knappar, avatarer, egna bubblor) skulle bli ljusa
   plattor med --ink inverterad → ge dem en blå ton som funkar på mörk botten. */
html[data-theme="dark"] .btn:not(.secondary), html[data-theme="dark"] .mini-btn, html[data-theme="dark"] .nav-login:not(.logged) {
  background: #2f5686; color: #f4efe6;
}
html[data-theme="dark"] .btn:not(.secondary):hover, html[data-theme="dark"] .mini-btn:hover, html[data-theme="dark"] .nav-login:not(.logged):hover { background: var(--accent-deep); }
html[data-theme="dark"] .nav-links a.nav-login { color: #f4efe6; }
html[data-theme="dark"] .avatar { background: #2f5686; color: #f4efe6; }
html[data-theme="dark"] .bubble.me { background: #2f5686; color: #f4efe6; }
html[data-theme="dark"] .bubble.them { background: var(--bg-alt); }
/* --paper används som TEXTFÄRG ovanpå accent-/valfria färger. I mörkt läge är
   paper mörkt → texten försvinner. Tvinga ljus text på färgade ytor. */
html[data-theme="dark"] .bubble.colored, html[data-theme="dark"] .bubble.me.colored { color: #f4efe6; }
html[data-theme="dark"] .bubble.colored .bub-sender { color: rgba(244,239,230,0.85); }
html[data-theme="dark"] .badge, html[data-theme="dark"] .nav-new, html[data-theme="dark"] .upd-avatar,
html[data-theme="dark"] .btn-accent, html[data-theme="dark"] .cam-badge, html[data-theme="dark"] .e2e-tag.official { color: #f4efe6; }
/* Ljus bubbelfärg (t.ex. vit/kossa) måste ha MÖRK text även i mörkt läge —
   annars vinner regeln ovan och texten blir ljus på ljus botten. */
html[data-theme="dark"] .bubble.colored.lightbg, html[data-theme="dark"] .bubble.me.colored.lightbg { color: #1e2a38; }
html[data-theme="dark"] .bubble.colored.lightbg .bub-sender { color: rgba(30,42,56,0.75); }
html[data-theme="dark"] .bubble.colored.lightbg .time { color: #1e2a38; opacity: 0.7; }
html[data-theme="dark"] .bubble.colored.lightbg .caption { color: #1e2a38; }
html[data-theme="dark"] .bs-swatch[title="Standard"] { background: #2f5686 !important; }
html[data-theme="dark"] .bs-preview .bubble.me { background: #2f5686; color: #f4efe6; }
html[data-theme="dark"] .modal, html[data-theme="dark"] .ctx-menu, html[data-theme="dark"] .nav-dd-menu { box-shadow: 0 24px 60px -24px rgba(0,0,0,0.8); }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color-scheme: dark; }
html[data-theme="dark"] img.av-img { filter: none; }
/* Tailwind-klasser med hårdkodade hex (community-profilen) */
html[data-theme="dark"] .bg-\[\#faf6ed\] { background-color: var(--paper); }
html[data-theme="dark"] .bg-\[\#efe7d6\] { background-color: var(--bg-alt); }
html[data-theme="dark"] .bg-\[\#f2e4c4\] { background-color: #4a3d1c; }
html[data-theme="dark"] .bg-\[\#0e2a47\] { background-color: #2f5686; }
html[data-theme="dark"] .hover\:bg-\[\#15355a\]:hover { background-color: var(--accent-deep); }
html[data-theme="dark"] .bg-white { background-color: var(--bg); }
html[data-theme="dark"] .text-\[\#0e2a47\] { color: var(--ink); }
html[data-theme="dark"] .text-\[\#3d5570\] { color: var(--ink-soft); }
html[data-theme="dark"] .text-\[\#6b7a8f\] { color: var(--ink-mute); }
html[data-theme="dark"] .text-\[\#7c5d17\] { color: #e9c777; }
html[data-theme="dark"] .text-\[\#a04e2e\] { color: var(--accent); }
html[data-theme="dark"] .border-\[\#faf6ed\] { border-color: var(--paper); }
html[data-theme="dark"] .border-\[\#0e2a47\]\/25 { border-color: var(--line-strong); }
html[data-theme="dark"] .placeholder\:text-\[\#a8b0bc\]::placeholder { color: var(--ink-faint); }
/* Kontomodalen från pro-nav.js (hårdkodade färger) */
html[data-theme="dark"] .sk-acct-card { background: var(--paper); }
html[data-theme="dark"] .sk-acct-name, html[data-theme="dark"] .sk-acct-num, html[data-theme="dark"] .sk-acct-val { color: var(--ink); }
html[data-theme="dark"] .sk-acct-box { background: var(--bg-alt); }
html[data-theme="dark"] .sk-acct-lbl { color: var(--ink-mute); }
html[data-theme="dark"] .sk-acct-av { background: #2f5686; color: #f4efe6; border-color: var(--paper); }
html[data-theme="dark"] .sk-acct-eye { color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .sk-acct-eye:hover { background: var(--ink); color: var(--paper); }
html[data-theme="dark"] .sk-acct-badge.free { background: var(--bg-alt); color: var(--ink-mute); }
html[data-theme="dark"] .sk-acct-badge.pro { background: #4a3d1c; color: #e9c777; }
html[data-theme="dark"] .sk-acct-cta { color: var(--accent); }

/* Temaknappen i menyn (sol/måne) */
.nav-theme { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); cursor: pointer; padding: 0; transition: background 0.2s, color 0.2s; flex-shrink: 0; }
.nav-theme:hover { background: var(--bg-alt); color: var(--ink); }
.nav-theme svg { width: 16px; height: 16px; }
.nav-theme .ic-moon { display: block; }
.nav-theme .ic-sun { display: none; }
html[data-theme="dark"] .nav-theme .ic-moon { display: none; }
html[data-theme="dark"] .nav-theme .ic-sun { display: block; }
@media (max-width: 1024px) {
  .nav-theme { width: auto; height: auto; border-radius: 6px; padding: 12px 10px; margin-top: 10px; gap: 10px; font-family: var(--sans); font-size: 1rem; justify-content: flex-start; }
  .nav-theme .nt-label { display: inline; }
}
.nav-theme .nt-label { display: none; }

/* --- Inställningar (/installningar): accentfärg, textstorlek, rörelser ---
   Sätts av head-snutten från localStorage sk-accent / sk-text / sk-motion.
   Efter dark-reglerna ovan så accenten vinner även i mörkt läge. */
html[data-accent="green"] { --accent: #4e7a5e; --accent-deep: #36583f; }
html[data-accent="blue"] { --accent: #3f6fa8; --accent-deep: #2d5687; }
html[data-accent="purple"] { --accent: #7b5aa6; --accent-deep: #634588; }
html[data-accent="gold"] { --accent: #b08a2e; --accent-deep: #8d6d1f; }
html[data-theme="dark"][data-accent="green"] { --accent: #7fb08f; --accent-deep: #6fa383; }
html[data-theme="dark"][data-accent="blue"] { --accent: #7aa4d8; --accent-deep: #5f8cc4; }
html[data-theme="dark"][data-accent="purple"] { --accent: #a98bd3; --accent-deep: #9373c2; }
html[data-theme="dark"][data-accent="gold"] { --accent: #d4ad52; --accent-deep: #c29a3f; }
html[data-text="s"] { font-size: 93.75%; }
html[data-text="s"] body { font-size: 15px; }
html[data-text="l"] { font-size: 112.5%; }
html[data-text="l"] body { font-size: 18px; }
html[data-text="xl"] { font-size: 125%; }
html[data-text="xl"] body { font-size: 20px; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
html[data-motion="reduce"] { scroll-behavior: auto !important; }