/* ============================================================================
   THEME – Patrull Mullvaden / Jamboree26
   ----------------------------------------------------------------------------
   Delad grund för ALLA sidor: färger, typografi, reset, fokus/rörelse.
   Vill ni byta en färg överallt: ändra den EN gång här, så slår det igenom
   på startsidan, packlistan och alla framtida sidor som länkar in den här filen.

   Lägg in i <head> FÖRE components.css och före sidans egna <style>:
     <link rel="stylesheet" href="assets/theme.css">
   (justera sökvägen till ../assets/theme.css för sidor i en undermapp)
   ============================================================================ */

:root {
  /* --- Färger, ur Equmenias grafiska profil --- */
  --purple:    #8C3C8D;   /* Equmenia-lila, primärfärg */
  --purple-dk: #6E2E6F;   /* mörkare lila för hover/text */
  --teal:      #116468;   /* scoutskjorte-grönblå */
  --turkos:    #63C1BF;
  --is-turkos: #C1E5E4;
  --beige:     #F7E0D6;
  --gul:       #FAB600;   /* mustig gul, används sparsamt */
  --mandarin:  #F79683;   /* rosa mandarin, används sparsamt */
  --navy:      #14385C;   /* Jamboree-loggans blå */

  /* --- Text & ytor --- */
  --ink:       #2B2530;   /* brödtext */
  --ink-soft:  #6A6470;
  --bg:        #FCFBFA;   /* enhetlig ljus bakgrund (hela sidan) */
  --surface:   #FFFFFF;   /* kort */
  --line:      rgba(43,37,48,0.12);
  --line-2:    rgba(43,37,48,0.07);
  --danger:    #C0392B;   /* röd för "ta bort"/varningsåtgärder */

  /* --- Form & djup --- */
  --shadow:    0 1px 2px rgba(43,37,48,0.04), 0 10px 26px rgba(110,46,111,0.07);
  --radius:    16px;

  /* --- Sidbredder ---
     Två mått, båda ändras HÄR. Varje sida väljer vilken den använder genom att
     sätta --maxw lokalt till var(--maxw-text) eller var(--maxw-wide). */
  --maxw-text: 760px;   /* textsidor: bekväm läsbredd (~60–80 tecken/rad) */
  --maxw-wide: 920px;   /* breda sidor: t.ex. packlistans kryssruterutnät */

  /* --- Typsnitt (laddas via Google Fonts i sidans <head>) --- */
  --font-head: "Poppins", system-ui, sans-serif;       /* rubriker & etiketter */
  --font-body: "Source Serif 4", Georgia, serif;        /* brödtext, i Swifts anda */
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ---------- typografi ---------- */
/* Poppins = rubriker/etiketter (i Sofia Pros anda). Serif sköter brödtexten. */
h1, h2, h3, .ui { font-family: var(--font-head); }
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.01em; margin: 0; font-weight: 700; }

a {
  color: var(--purple);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(140,60,141,0.32);
  transition: color .15s, border-color .15s;
}
a:hover { color: var(--purple-dk); border-color: var(--purple-dk); }

/* ---------- tillgänglighet ---------- */
:focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
