/* ============================================================
   Optiledger — DESIGNSYSTEM (single source of truth)
   ------------------------------------------------------------
   ALLA design-variabler bor HÄR: färg, typografi, spacing,
   radie, tracking, skuggor. index.html och alla undersidor
   (via article.css) läser dessa — deklarera ALDRIG om dem
   lokalt. Ändra en gång här → gäller hela sajten.

   VIKTIGT: den här filen laddas med ?v=-version i index.html
   och via @import i article.css. Bumpa versionen om du ändrar
   här, annars kan webbläsare servera en gammal cachad kopia.
   ============================================================ */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root{

  /* ---------- FÄRG ---------- */
  --ink:       #101820;   /* rubriker, mörk bakgrund */
  --ink-2:     #172129;   /* footer-bakgrund */
  --body:      #414a52;   /* brödtext */
  --muted:     #69747d;   /* sekundär/meta-text */
  --inv-muted: #a8b0b7;   /* dämpad text på mörk botten */
  --line:      #e4e6e8;   /* ljusa avgränsare */
  --line-d:    rgba(255,255,255,.12); /* avgränsare på mörk botten */
  --bg:        #fff;      /* sidbakgrund */
  --alt:       #f4f5f6;   /* alternerande sektionsbakgrund */
  --bg-alt:    var(--alt);/* alias — samma yta, äldre namn (index) */
  --teal:      #11aeaa;   /* primär accent */
  --teal-dark: #087f7c;   /* accent på ljus botten (kontrast) */

  /* ---------- RADIE ---------- */
  --r: 4px;

  /* ---------- TRACKING (letter-spacing) ---------- */
  --track-1: -.03em;   /* stora rubriker (h1/h2) */
  --track-2: -.02em;   /* mindre rubriker (h3) */

  /* ---------- TYPOGRAFI ---------- */
  --font-sans: "Inter";
  --font-mono: "JetBrains Mono";

  /* Fasta stegstorlekar (body / UI / smått) */
  --fs-2xs: 12.5px;   /* finstilt: legal, taggar, meta */
  --fs-xs:  13.5px;   /* småetiketter, badges */
  --fs-sm:  15px;     /* sekundär text, nav, knappar */
  --fs-base:16px;     /* brödtext (marknad/UI, startsidan) */
  --fs-md:  18px;     /* större brödtext */
  --fs-lg:  20px;     /* ingress-nära, lyft */

  /* Fluid rubriker (clamp: min, skala, max) */
  --fs-h4: clamp(20px, 1.6vw, 24px);   /* kort-/blocktitlar        1.20x */
  --fs-h3: clamp(27px, 2.4vw, 36px);   /* mindre sektionsrubriker  1.33x */
  --fs-h2: clamp(32px, 3.0vw, 44px);   /* sektionsrubriker         1.38x */
  --fs-h1: clamp(44px, 6vw, 68px);     /* hero / sidtitel — stor */

  /* Ingress / lead */
  --fs-lead: clamp(18px, 1.4vw, 21px); /* 1.17x */

  /* Läsläge (långa artiklar/undersidor — avsiktligt något större) */
  --fs-reading: 17px;
  --lh-reading: 1.72;

  /* Radhöjder kopplade till roll */
  --lh-tight: 1.06;   /* stora rubriker */
  --lh-head:  1.14;   /* mellanrubriker */
  --lh-body:  1.6;    /* brödtext */

  /* ---------- SPACING-SKALA ---------- */
  /* Använd dessa istället för lösa px-värden i ny CSS. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-22: 88px;
  --sp-24: 96px;
  --sect:  104px;   /* vertikalt sektionsavstånd (hero/blocks) */

  /* ---------- SKUGGA ---------- */
  --shadow-card: 0 20px 50px rgba(16,24,32,.12);
}

/* Kompakt desktop: motverkar den inzoomade känslan på Windows-laptops
   som ofta landar runt 1280 CSS-pixlar vid 125 % skärmskalning. */
@media(min-width:961px) and (max-width:1280px),
       (min-width:1281px) and (max-width:1536px) and (max-resolution:1.75dppx){
  :root{
    --fs-base:15px;
    --fs-md:16.5px;
    --fs-lg:18.5px;
    --fs-h4:21px;
    --fs-h3:30px;
    --fs-h2:37px;
    --fs-h1:54px;
    --fs-lead:18px;
    --fs-reading:16px;
    --sect:82px;
  }
}