/* =============================================================
   SD Kampanjsite – Design Tokens (v0.2 · site-nivå)
   Extraherat ur Foldrar/ och utökat från poster → komplett site.
   Enda källa till sanning: färg, typografi, spacing, radie,
   elevation, z-index, motion, breakpoints, dataviz.
   ============================================================= */

/* ---------- Typsnitt ----------
   En typfamilj: Plus Jakarta Sans, genom hela systemet.
   (Den bespoke "Ibiza22" som tryckmaterialet använde visade sig vara ett
   omdöpt Plus Jakarta Sans — se copyright i fontfilen — så vi kör upstream:
   samma bokstavsformer, korrekt licens, alla vikter.)
   Display = Bold (700) i VITT på djup panel (--sd-navy-800).
   Self-hostad variabelfont (wght 200–800) — INGEN Google Fonts-CDN, av
   GDPR-skäl (CDN skickar besökarens IP till tredje part). */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
/* Display-font: Franxurter (den rundade brand-fonten från affischen),
   med Fredoka som fallback. Endast för hero/display — aldrig brödtext
   (begränsad glyfuppsättning). Röd på gult. */
@font-face {
  font-family: "Franxurter";
  src: url("../fonts/Franxurter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/Fredoka-700.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
/* Handskrift — endast för graf-annoteringar ("SD vinner valet" etc). */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/Caveat-600.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* ============================================================
     FÄRG — kärnpalett
     ============================================================ */
  --sd-yellow:        #fecd13; /* varumärkesgult, accent-yta */
  --sd-yellow-accent: #ffd615; /* ren accent – bi-ränder, blomblad */
  --sd-red:           #ed193e; /* CTA, betoning, "Ja/Nej"-signal */
  --sd-red-600:       #cc1436; /* röd hover */
  --sd-navy:          #1d276d; /* brödtext + rubriker på vitt */
  --sd-navy-poster:   #12205f; /* text på gul botten */
  --sd-blue-mid:      #1a75bc; /* logoblå, länkar */
  --sd-blue-600:      #155e96; /* länk hover */

  /* Djupa blå-toner (paneler/kontrastzoner) */
  --sd-navy-900: #072159;
  --sd-navy-800: #0d2561;
  --sd-navy-700: #0f2562;
  --sd-indigo:   #2c2478; /* sekundär djup panel */

  /* Neutraler — svalt varma gråskalor */
  --sd-white:  #ffffff;
  --sd-paper:  #f7f8fa; /* svagt grå sidbakgrund */
  --sd-cream:  #f2f1e8; /* varm off-white — data-viz/grafyta (tryck-känsla) */
  --sd-mist:   #eef0f4; /* subtil yta / hover */
  --sd-line:   #dfe2ea; /* hårfina linjer */
  --sd-line-2: #c9cdd6; /* tydligare kant */
  --sd-gray:   #898c93; /* dämpad text, bildtext */
  --sd-gray-2: #6b7280; /* något mörkare muted */
  --sd-ink:    #12163a; /* mörkaste text */

  /* Status (formulär, notiser) */
  --sd-success: #1f8a4c;
  --sd-warning: #d99400;
  --sd-danger:  #d7142a;
  --sd-info:    var(--sd-blue-mid);

  /* ============================================================
     FÄRG — semantiska roller
     ============================================================ */
  --color-bg:              var(--sd-white);
  --color-bg-alt:          var(--sd-paper);
  --color-bg-brand:        var(--sd-yellow);
  --color-surface:         var(--sd-white);
  --color-surface-alt:     var(--sd-mist);
  --color-surface-dark:    var(--sd-navy-800);
  --color-text:            var(--sd-navy);
  --color-text-strong:     var(--sd-ink);
  --color-text-muted:      var(--sd-gray);
  --color-text-on-dark:    var(--sd-white);
  --color-text-on-dark-muted: rgba(255,255,255,.72);
  --color-heading:         var(--sd-navy);
  --color-display:         var(--sd-red);          /* Franxurter-rubrik, röd */
  --color-display-surface: var(--sd-yellow);       /* hero-botten, gul */
  --color-accent:          var(--sd-red);
  --color-link:            var(--sd-blue-mid);
  --color-link-hover:      var(--sd-blue-600);
  --color-border:          var(--sd-line);
  --color-border-strong:   var(--sd-line-2);
  --color-focus:           var(--sd-blue-mid);

  /* Invert-grupp — den djupa kontrastzonen (header-utility, footer,
     CTA-band, faktaruta-huvud). Läs dessa, hårdkoda aldrig navy. */
  --invert-bg:        var(--sd-navy-800);
  --invert-on:        var(--sd-white);
  --invert-muted:     rgba(255,255,255,.72);
  --invert-line:      rgba(255,255,255,.14);
  --invert-accent:    var(--sd-yellow-accent);

  /* ============================================================
     TYPOGRAFI
     ============================================================ */
  --font-display: "Franxurter", "Fredoka", "Plus Jakarta Sans", sans-serif; /* hero/display, röd på gult */
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif; /* sektions-/sidrubriker, 700 */
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif; /* brödtext, 400 */
  --font-script:  "Caveat", "Segoe Script", cursive; /* handskrift, graf-annoteringar */
  --font-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;
  --weight-regular: 400;
  --weight-bold:    700;
  --weight-display: 700;

  /* Fluid typskala — micro → skrikande */
  --text-2xs:  0.6875rem; /* 11 — micro-labels, kickers */
  --text-xs:   0.75rem;   /* 12 — meta */
  --text-sm:   0.875rem;  /* 14 — bildtext, sekundärt */
  --text-base: 1.0625rem; /* 17 — brödtext (folder-densitet) */
  --text-lg:   1.1875rem; /* 19 — ingress */
  --text-xl:   1.375rem;  /* 22 — underrubrik */
  --text-2xl:  1.75rem;   /* 28 — kort-titel / h3 */
  --text-3xl:  clamp(1.75rem, 3vw, 2.25rem);   /* h2 / sektionsrubrik */
  --text-4xl:  clamp(2rem, 4.5vw, 3.25rem);    /* h1 / sidhuvud */
  --text-5xl:  clamp(2.75rem, 7vw, 4.5rem);    /* hero-display */
  --text-6xl:  clamp(3.5rem, 9vw, 6rem);       /* splash */

  /* Roll-alias (bakåtkompatibla) */
  --text-display: var(--text-5xl);
  --text-h1:      var(--text-4xl);
  --text-h2:      var(--text-3xl);
  --text-h3:      var(--text-2xl);
  --text-body:    var(--text-base);
  --text-small:   var(--text-sm);

  --leading-tight:   1.04;  /* display */
  --leading-heading: 1.12;
  --leading-snug:    1.3;
  --leading-body:    1.55;
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em; /* versal-kickers */

  /* ============================================================
     SPACING (8pt-grid)
     ============================================================ */
  --space-0: 0;
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 40px;  --space-8: 48px;
  --space-9: 64px;  --space-10: 80px; --space-12: 120px;

  /* ============================================================
     RUNDNING
     ============================================================ */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — mjuka, låga skuggor (rundat men platt manér)
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(13,37,97,.06), 0 1px 1px rgba(13,37,97,.04);
  --shadow-2: 0 4px 14px rgba(13,37,97,.08);
  --shadow-3: 0 12px 32px rgba(13,37,97,.12);
  --shadow-focus: 0 0 0 3px rgba(26,117,188,.35);

  /* ============================================================
     LAYOUT / GRID
     ============================================================ */
  --content-max: 1180px;
  --content-wide: 1360px;
  --measure: 66ch;        /* läsbredd brödtext */
  --measure-narrow: 44ch;
  --gutter: clamp(16px, 4vw, 40px);
  --grid-gap: 24px;

  /* Breakpoints (referens för @media; CSS-vars kan ej användas i media-query) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-base: 0;
  --z-sticky: 100;   /* sticky sektioner */
  --z-header: 200;   /* sidhuvud */
  --z-cta: 250;      /* sticky CTA-bar */
  --z-overlay: 800;  /* mobilmeny-overlay */
  --z-modal: 900;
  --z-toast: 1000;

  /* ============================================================
     MOTION
     ============================================================ */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);

  /* ============================================================
     DATAVIS-PALETT
     Kategoriska hues + sekvens + divergerande. Byggd på SD-blått
     som bas; gult/rött som accenthues. Fungerar mot vitt & panel.
     ============================================================ */
  --dv-cat-1: #1d276d; /* navy (primär serie) */
  --dv-cat-2: #1a75bc; /* logoblå */
  --dv-cat-3: #fecd13; /* gul */
  --dv-cat-4: #ed193e; /* röd */
  --dv-cat-5: #2c8a6b; /* grön */
  --dv-cat-6: #6b4fa0; /* plommon */

  /* Sekvens (single-hue navy → ljus) för choropleth/Sverigekarta */
  --dv-seq-1: #eaf0f8;
  --dv-seq-2: #b9cbe8;
  --dv-seq-3: #7a9bd0;
  --dv-seq-4: #3f66ad;
  --dv-seq-5: #1d276d;

  /* Divergerande (röd ↔ neutral ↔ blå) för +/− kring mittpunkt */
  --dv-div-neg2: #ed193e;
  --dv-div-neg1: #f5907f;
  --dv-div-mid:  #eef0f4;
  --dv-div-pos1: #7a9bd0;
  --dv-div-pos2: #1d276d;

  /* ============================================================
     KOMPONENT-KROKAR (globala defaults, kan överridas per komponent)
     ============================================================ */
  --focus-ring: var(--shadow-focus);
  --hairline: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}