/*
 * Designtokens — enda källan för färg, typografi och spacing.
 *
 * Regel: ingen annan CSS-fil får innehålla ett hexvärde, en px-storlek på text eller ett
 * eget spacingvärde. Allt refererar hit. Det var precis det som saknades tidigare: 2 051
 * rader inline-CSS i 19 <style>-block, där samma knappfärg fanns i sex varianter.
 *
 * Ljust läge är det enda som stöds. Mörkt läge kan läggas till genom att omdefiniera
 * tokens under prefers-color-scheme utan att röra någon komponent — men det ska göras
 * medvetet och testas, inte slås på i förbifarten på 760 sidor.
 */

:root {
  /* --- Färg: neutraler med en aning blå dragning, inte rena gråtoner --- */
  --f-yta:            #ffffff;
  --f-yta-dampad:     #f6f7f9;
  --f-yta-upphojd:    #ffffff;
  --f-linje:          #e2e5ea;
  --f-linje-stark:    #c8cdd6;

  --f-text:           #161a21;
  --f-text-dampad:    #4d5560;
  --f-text-svag:      #737c88;

  /* --- Färg: varumärke --- */
  --f-primar:         #1f4d7a;
  --f-primar-hover:   #163a5c;
  --f-primar-mjuk:    #eaf1f8;
  --f-primar-text:    #ffffff;

  /* --- Färg: betydelse. Separat från varumärkesfärgen. --- */
  --f-positiv:        #1f6b47;
  --f-positiv-mjuk:   #e8f2ec;
  --f-varning:        #8a5a12;
  --f-varning-mjuk:   #fbf1e0;
  --f-negativ:        #9a3327;
  --f-negativ-mjuk:   #fbecea;

  /* --- Typografi: systemfonter. Noll nedladdning, noll layoutskift. --- */
  --typ-brod: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --typ-rubrik: var(--typ-brod);
  --typ-kod: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Typskala, 1.200 (minor third), fluid mellan 360 och 1280 px viewport */
  --t-xs:   0.8125rem;
  --t-s:    0.9375rem;
  --t-bas:  1rem;
  --t-m:    clamp(1.0625rem, 0.2vw + 1rem,   1.125rem);
  --t-l:    clamp(1.25rem,  0.5vw + 1.1rem,  1.5rem);
  --t-xl:   clamp(1.5rem,   1.2vw + 1.2rem,  2rem);
  --t-2xl:  clamp(1.875rem, 2vw + 1.3rem,    2.5rem);
  --t-3xl:  clamp(2.25rem,  3vw + 1.4rem,    3.25rem);

  --vikt-normal:  400;
  --vikt-medium:  500;
  --vikt-halvfet: 600;
  --vikt-fet:     700;

  --radavstand-tat:  1.25;
  --radavstand-bas:  1.6;
  --radavstand-luft: 1.75;

  /* --- Spacing: 4 px-baserad skala --- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  /* --- Form --- */
  --radie-s:    4px;
  --radie-m:    8px;
  --radie-l:    14px;
  --radie-pill: 999px;

  --skugga-1: 0 1px 2px rgba(22, 26, 33, .06);
  --skugga-2: 0 2px 8px rgba(22, 26, 33, .08);
  --skugga-3: 0 8px 24px rgba(22, 26, 33, .10);

  /* --- Mått --- */
  --bredd-innehall: 42rem;   /* ~65 tecken, läsbar radlängd */
  --bredd-sida:     72rem;
  --bredd-bred:     84rem;

  --fokus-ring: 2px solid var(--f-primar);
  --fokus-offset: 2px;

  --overgang: 160ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --overgang: 0ms; }
}