/* ============================================================
   Designvariabler – den enda platsen för färger, typsnitt och mått.
   Ljust tema är standard. Mörkt tema sätts med data-theme="dark"
   på <html> (js/core/theme-init.js väljer utifrån systemet eller
   användarens val innan sidan målas).
   ============================================================ */

:root {
  color-scheme: light;

  /* Färger */
  --bg: #f6f4fa;              /* papper, svagt lila */
  --surface: #ffffff;         /* kort, frågor, formulär */
  --surface-2: #efebf6;       /* lugna fält, tabellhuvud */
  --text: #1d1a26;            /* bläck */
  --muted: #5f5a6e;
  --line: #e2ddec;
  --line-strong: #c9c1da;

  --primary: #5b2e91;         /* provsidornas lila */
  --primary-hover: #4a2478;
  --primary-soft: #ece4f6;
  --on-primary: #ffffff;

  --highlight: #ffc93c;       /* logotypens gula: överstrykningspenna */
  --highlight-soft: #ffe9a8;
  --on-highlight: #1d1a26;

  --ok: #1b7f3b;
  --ok-soft: #e3f4e8;
  --bad: #b3261e;
  --bad-soft: #fbe7e5;
  --warn: #9a5800;
  --warn-soft: #fff1d6;
  --neutral: #7c7690;         /* obesvarad */

  --image-bg: #ffffff;        /* provbilder har vit bakgrund */

  /* Diagram (validerade för färgblindhet och kontrast mot --surface) */
  --chart-1: #7b4fc4;         /* lila: kvantitativ del, staplar */
  --chart-2: #eb6834;         /* orange: verbal del */
  --chart-grid: #ebe7f2;
  --chart-axis: #c9c1da;

  /* Typsnitt */
  --font-ui: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-read: "Literata", Georgia, "Times New Roman", serif;

  /* Typskala (basen 17 px, kvot ungefär 1,25) */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.625rem;
  --step-3: 2.0625rem;
  --step-4: 2.625rem;
  --step-5: clamp(2.5rem, 7vw, 3.75rem);

  /* Avstånd */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  /* Former */
  --r-sm: 6px;                /* knappar, fält */
  --r-md: 12px;               /* paneler, kort */
  --r-pill: 999px;            /* chips */
  --shadow-1: 0 1px 2px rgb(40 20 70 / 0.06), 0 4px 14px rgb(40 20 70 / 0.06);
  --shadow-2: 0 2px 6px rgb(40 20 70 / 0.08), 0 16px 40px rgb(40 20 70 / 0.14);
  --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);

  --container: 1140px;
  --measure: 68ch;
}

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

  --bg: #15121c;
  --surface: #1f1b29;
  --surface-2: #2a2537;
  --text: #efecf6;
  --muted: #aaa4ba;
  --line: #332e43;
  --line-strong: #4a4360;

  --primary: #b99cf0;
  --primary-hover: #cbb4f5;
  --primary-soft: #2c2540;
  --on-primary: #1a1424;

  --highlight: #ffc93c;
  --highlight-soft: #5a4a12;
  --on-highlight: #1d1a26;

  --ok: #6ad39a;
  --ok-soft: #16301f;
  --bad: #ff8a80;
  --bad-soft: #3a1c1a;
  --warn: #f0b45a;
  --warn-soft: #3a2a10;
  --neutral: #8f89a3;

  --image-bg: #ffffff;

  --chart-1: #9b7ae0;
  --chart-2: #d95926;
  --chart-grid: #2c2738;
  --chart-axis: #4a4360;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.45);
}