/* ============================================================
   Hemtag — base.css
   Design tokens (CSS-variabler), reset och typografi.

   TOKENS ÄR KONTRAKTET: ändra ett värde här och hela sajten
   följer med. Komponenter (components.css) och layout
   (layout.css) ska referera tokens — aldrig hårdkodade värden
   i ny kod. Se /styleguide.html för visuell översikt.
   ============================================================ */

:root {
  /* ---- Färger: yta och text ---- */
  --bg: #FAFAF8;             /* sidbakgrund — varmvit */
  --surface: #FFFFFF;        /* kort och paneler */
  --surface-2: #F4F2EC;      /* sekundär yta — sand */
  --border: rgba(20, 20, 20, 0.08);
  --border-strong: rgba(20, 20, 20, 0.18);
  --text: #1A1A1A;           /* rubriker, primärtext */
  --text-2: #5F5E5A;         /* brödtext, sekundär */
  --text-3: #8A8A82;         /* metadata, källrader */

  /* ---- Färger: accenter ---- */
  --accent: #1F8FCC;         /* Hemtag-blå — länkar, primär accent */
  --accent-2: #156F9F;       /* mörkare blå — hover, betoning */
  --accent-bg: #E6F1FB;
  --warm: #E55A1F;           /* Hemtag-orange — varningar, markörer */
  --warm-bg: #FFEFE4;
  --warm-text: #6E2A0E;
  --rose: #993556;           /* stora avvikelser i tabeller */
  --rose-bg: #FBEAF0;
  --blue: #185FA5;
  --blue-bg: #E6F1FB;

  /* ---- Färger: diagram (Chart.js läser inte CSS-variabler —
         håll charts.js i synk med dessa vid ändring) ---- */
  --chart-1: #1F8FCC;        /* primär serie */
  --chart-2: #E55A1F;        /* kontrastserie */
  --chart-3: #6BB7DF;        /* ljusblå — delmängd */
  --chart-4: #5F5E5A;        /* neutral serie */
  --chart-grid: rgba(20, 20, 20, 0.04);
  --chart-tick: #8A8A82;

  /* ---- Typografi ----
     Självhostade variabelfonter (assets/fonts, SIL OFL):
     Source Serif 4 för rubriker och långläsning, Inter för
     data och gränssnitt. Fallback till systemstackarna. */
  --serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* Typskala — används av komponenterna */
  --fs-meta: 11px;           /* etiketter, källrader, pills */
  --fs-small: 12px;          /* metadata, captions */
  --fs-ui: 13px;             /* tabeller, knappar, navigering */
  --fs-body-s: 14px;         /* kompakt brödtext i kort */
  --fs-body: 15px;           /* bastext (body) */
  --fs-read: 16px;           /* långläsning (.text-block) */
  --fs-lead: 18px;           /* ingresser */
  --fs-h3: 18px;
  --fs-h2: 26px;             /* sektionsrubriker */
  --fs-stat: 30px;           /* nyckeltal i kort */
  --fs-h1: 36px;
  --fs-display: 44px;        /* hjälterubrik */

  /* ---- Avståndsskala ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;              /* standardgap i tighta grids */
  --sp-4: 16px;              /* standardgap i kortgrids */
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 56px;              /* sektionsavstånd */
  --sp-8: 80px;

  /* ---- Radier och skuggor ---- */
  --r-sm: 8px;
  --r-md: 12px;              /* standardkort */
  --r-lg: 16px;
  --shadow-pop: 0 16px 32px rgba(20, 20, 20, 0.08);  /* utfällda paneler */

  /* ---- Mått ---- */
  --container: 1080px;
  --measure: 680px;          /* maxbredd långläsning */
  --measure-lead: 620px;     /* maxbredd ingress */
}

/* ---- Webbtypsnitt (variabelfonter, latin-subset) ---- */
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* ---- Typografi ---- */
.eyebrow { font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 500; margin-bottom: 16px; }
.display { font-family: var(--serif); font-size: var(--fs-display); line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 24px; max-width: 720px; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); max-width: var(--measure-lead); }
.h-section { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; margin: var(--sp-7) 0 12px; letter-spacing: -0.01em; }
.h-sub { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; margin: 28px 0 10px; }
.text-block { max-width: var(--measure); }
.text-block p { font-size: var(--fs-read); line-height: 1.7; color: var(--text-2); margin-bottom: 16px; }

.quote { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--text-2); border-left: 3px solid var(--warm); padding: 8px 0 8px 20px; margin: 24px 0; max-width: 600px; }

@media (max-width: 640px) {
  .display { font-size: 34px; }
  .h-section { font-size: 23px; }
}