/* theme.css – mappningslager mellan gamla variabelnamn och tokens.css
 * ───────────────────────────────────────────────────────────────────
 * Den här filen definierar INGA egna färgvärden längre. Den översätter bara
 * sajtens äldre variabelnamn (--bg, --muted, --ui-border, --radius-sm …) till
 * tokens i tokens.css, så att layout.css, components.css och prose.css byter
 * uttryck utan att en enda regel i dem behöver röras.
 *
 * Laddas SIST av stilmallarna. Det är avsiktligt: punktjusteringarna längst
 * ner måste kunna slå hårdkodade värden i components.css.
 *
 * Vill du ändra en färg – gör det i tokens.css, inte här.
 */

:root {
  /* ── Basytor ─────────────────────────────────────────────────── */
  --bg: var(--gryning);        /* sidans grund – sval, nästan omärkligt grön */

  /* ── Text ────────────────────────────────────────────────────── */
  /* --text kommer redan från tokens.css (= --skiffer). --muted pekas om till
   * --text-matt, som är uträknat till 5,49:1 mot Gryning och alltså håller
   * AA som brödtext – det gjorde inte den gamla 0,7-opaciteten på alla ytor. */
  --muted: var(--text-matt);

  /* ── Linjer ──────────────────────────────────────────────────── */
  /* Systemet skiljer ytor med FÄRG, inte med hårstreck. Kvar finns bara den
   * här, som ritar de sista svaga avgränsningarna. */
  --border-subtle: rgba(20, 33, 31, 0.05);

  /* =========================
     UI-tokens (knappar / nav)
     ========================= */

  --ui-surface: var(--ljus);
  --ui-hover-bg: rgba(14, 106, 99, 0.06);
  --ui-hover-text: var(--fjard);
  --ui-hover-border: var(--ui-border-hover);

  --ui-border: rgba(20, 33, 31, 0.14);
  --ui-border-hover: rgba(14, 106, 99, 0.40);

  /* Fokus – samma petrol som :focus-visible i base.css */
  --ui-focus: var(--fjard);

  --ui-active-bg: rgba(14, 106, 99, 0.10);

  /* Gradienten är avstängd med flit. Den producerade exakt den grå
   * försiktighet som designsystemet dömer ut – ytor ska vara fylld färg. */
  --ui-surface-grad: none;

  /* ── Skuggor ─────────────────────────────────────────────────── */
  /* Ljuset kommer uppifrån HÖGER, samma väg som pilen pekar, så skuggan
   * faller mot nedre vänster (negativ x). Det är vad som får ytorna att
   * kännas som samma fysiska rum. */
  --shadow-card: var(--skugga);
  --shadow-card-hover: -2px 4px 10px rgba(20, 33, 31, 0.09);

  --shadow-btn: -1px 1px 2px rgba(20, 33, 31, 0.06);
  --shadow-btn-hover: -2px 3px 6px rgba(20, 33, 31, 0.09);

  /* ── Radier ──────────────────────────────────────────────────── */
  /* KORSVIS MAPPNING, och det är avsiktligt.
   *
   * Gamla systemet: sm = knappar/nav (6px), md = kort (10px).
   * Nya systemet har två nivåer med motsatt betydelse:
   *   --radie-plan (4px)  TRYCKT   – plan, kort, fält. Nästan raka hörn.
   *   --radie-mjuk (10px) GREPPBART – knappar, bilder. Sådant man rör vid.
   *
   * Alltså: knapparnas sm → mjuk, kortens md → plan. Ytor känns tryckta,
   * det man klickar på känns fysiskt. */
  --radius-sm: var(--radie-mjuk);
  --radius-md: var(--radie-plan);
}


/* =========================================================
   Punktjusteringar
   Hårdkodade värden i components.css som mappningen ovan inte når.
   Varje regel här är en kandidat att lyfta bort när motsvarande komponent
   skrivs om i ett senare steg.
   ========================================================= */