/**
 * Budgiv — designtokens.
 *
 * ---------------------------------------------------------------------------
 * EN REGEL SOM BÄR HELA FILEN
 * ---------------------------------------------------------------------------
 * Hexvärden står HÄR och ingen annanstans. En färg som skrivs av i en
 * komponent är en andra sanning om samma sak, och den driver isär — samma fel
 * som kakbanderollen mot dataskyddspolicyn, fast i CSS.
 *
 * Använd de SEMANTISKA tokenen (--text, --yta, --lank) i komponenter.
 * Råpaletten finns för att definiera dem, inte för att användas direkt.
 *
 * ---------------------------------------------------------------------------
 * GULD ÄR EN YTFÄRG, ALDRIG EN BLÄCKFÄRG PÅ VITT
 * ---------------------------------------------------------------------------
 * #E8A800 mot vitt ger kontrast 2.09:1. Det underkänns för brödtext (4.5:1),
 * för stor text (3:1) OCH för gränssnittselement (3:1).
 *
 *   ✅ Guld som BAKGRUND med mörk text ovanpå — 7.62:1, gott om marginal
 *   ✅ Guld som ren dekor utan informationsvärde (understrykning, prydnadslinje)
 *   ❌ Guld som textfärg på vitt
 *   ❌ Guld som ikon eller statusprick som bär betydelse
 *   ❌ Guld som fokusring på ljus bakgrund
 *
 * Den gamla guldtonen (#A8862C) klarade 3.44:1 och dög till stor text. Den nya
 * gör inte det. Byter man palett ärver man inte de gamla vanorna.
 */

:root {
  /* ---------------------------------------------------- råpalett */
  --navy-900: #0C2144;
  --navy-700: #14315C;
  --accent:   #2E6BBB;
  --gold:     #E8A800;
  --gold-100: #F5C13D;
  --yta-2:    #F6F8FB;
  --linje-1:  #D8DFEA;

  /* Två tillägg. Brandboarden saknade dem, och utan dem finns ingen
     tillgänglig sekundärtext och inga kontrollramar som syns. */
  --grafit:   #5B6672;  /* 5.85:1 mot vitt — sekundär text */
  --linje-2:  #6E7D91;  /* 4.20:1 mot vitt — ramar som BÄR betydelse */

  /* ---------------------------------------------------- semantiska */
  --text:        var(--navy-900);   /* 15.95:1 mot vitt */
  --text-svag:   var(--grafit);
  --text-invers: #FFFFFF;

  --yta:         #FFFFFF;
  --yta-lugn:    var(--yta-2);
  --yta-djup:    var(--navy-900);
  --yta-accent:  var(--gold);       /* endast som bakgrund, se ovan */

  --lank:        var(--accent);     /* 5.33:1 mot vitt */
  --lank-djup:   var(--gold-100);   /* 9.55:1 mot navy — länk på mörk yta */

  --linje:       var(--linje-1);    /* dekorativa avdelare */
  --linje-kontroll: var(--linje-2); /* input- och knappramar */

  /* Fokus. Två, för att en enda inte syns på båda ytorna:
     accent 5.33:1 mot vitt men bara 2.99:1 mot navy. */
  --fokus:        var(--accent);
  --fokus-invers: var(--gold-100);

  /* ---------------------------------------------------- typografi */
  --typ-rubrik: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                "Times New Roman", serif;
  --typ-brod:   Inter, system-ui, -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --typ-siffra: var(--typ-brod);

  /* Inga webbfonter. Sajten laddar ingenting från tredje part — samma
     hållning som att inte ha annonsspårning. Serifen är den som faktiskt
     finns installerad; fallbackkedjan är rangordnad, inte hoppfull. */

  /* ---------------------------------------------------- rytm */
  --steg-1: 4px;
  --steg-2: 8px;
  --steg-3: 12px;
  --steg-4: 16px;
  --steg-5: 24px;
  --steg-6: 32px;
  --steg-7: 48px;
  --steg-8: 72px;

  --radie:   3px;
  --radie-2: 6px;

  --matt-text:  68ch;   /* radlängd brödtext */
  --matt-sida: 1080px;
}

/* -------------------------------------------------------------- typskala
   Rubriker i serif, allt annat i sans. Serifen bär "dokument" — det är
   avsikten, och den ska inte spilla in i gränssnittet. */

h1, h2, h3 { font-family: var(--typ-rubrik); font-weight: 600;
             letter-spacing: -0.015em; color: var(--text); }
h1 { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.18; }
h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; }
h3 { font-size: 19px; line-height: 1.35; }

body { font-family: var(--typ-brod); font-size: 16.5px; line-height: 1.62;
       color: var(--text); background: var(--yta); }

.ingress { font-size: 18.5px; line-height: 1.55; color: var(--text-svag);
           max-width: var(--matt-text); }
.smatext { font-size: 14px; color: var(--text-svag); }

/* Belopp och datum. Tabulära siffror så att kolumner står i linje — ett
   dokument där siffrorna hoppar ser ut som ett utkast. */
.belopp, .datum, td.tal {
  font-family: var(--typ-siffra); font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.belopp { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }

/* -------------------------------------------------------------- länkar */

a { color: var(--lank); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.pa-djup a { color: var(--lank-djup); }

/* -------------------------------------------------------------- fokus
   Aldrig outline:none utan ersättning. Tangentbordsanvändaren är inte en
   kantfall här — hon är konkursförvaltaren som inte gillar mus. */

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 2px;
}
.pa-djup :focus-visible { outline-color: var(--fokus-invers); }

/* -------------------------------------------------------------- knappar */

.knapp {
  font: 600 15px/1 var(--typ-brod);
  padding: 13px 22px; border-radius: var(--radie);
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--steg-2);
  min-height: 44px;              /* träffyta, inte estetik */
}
.knapp--primar   { background: var(--navy-900); color: var(--text-invers); }
.knapp--sekundar { background: var(--yta); color: var(--navy-900);
                   border-color: var(--linje-kontroll); }
.knapp--markerad { background: var(--yta-accent); color: var(--navy-900); }

/* ⚠️ .knapp--markerad har mörk text på guld — 7.62:1. Vänd ALDRIG på den.
   Guld text på vit knapp ger 2.09:1 och är oläsbar för fler än man tror. */

/* -------------------------------------------------------------- ytor */

.kort { background: var(--yta); border: 1px solid var(--linje);
        border-radius: var(--radie-2); padding: var(--steg-5); }
.kort--lugn { background: var(--yta-lugn); border-color: transparent; }

.notis { background: var(--yta-lugn); border-left: 3px solid var(--yta-accent);
         padding: var(--steg-4) var(--steg-5); border-radius: 0 var(--radie) var(--radie) 0; }

/* Guldkanten på .notis är dekor och bär ingen betydelse ensam — texten säger
   vad det är. Det är därför den får vara guld trots kontrasten. */

/* -------------------------------------------------------------- status
   En färgprick får aldrig vara den enda bäraren av tillstånd. Texten
   bredvid säger samma sak, alltid. */

.status { display: inline-flex; align-items: center; gap: var(--steg-2);
          font-size: 14px; color: var(--text-svag); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
                  background: currentColor; flex: none; }
.status--klar::before   { background: #1E7A46; }
.status--vantar::before { background: var(--grafit); }
.status--brist::before  { background: #A32B2B; }

/* -------------------------------------------------------------- mörk sektion */

.pa-djup { background: var(--yta-djup); color: var(--text-invers); }
.pa-djup h1, .pa-djup h2, .pa-djup h3 { color: var(--text-invers); }
.pa-djup .ingress, .pa-djup .smatext { color: #C4D0E0; }  /* 9.6:1 mot navy */

/* --------------------------------------------------- språkväxlare (SV|EN) */
/* Sidhuvudets språkväxlare. Sitter UTANFÖR den byte-identiska navraden
   (efter <!--/BUDGIV-MENY-->), så bara sidor med en översättning bär den —
   navraden själv förblir byte-identisk (tests/navrad.test.ts). Aktivt språk
   markeras med aria-current. */
.sprakval { margin-left: 8px; display: inline-flex; gap: 2px; font-size: 13px; }
.sprakval a { padding: 6px 8px; border-radius: 3px; color: var(--text); text-decoration: none; }
.sprakval a[aria-current] { font-weight: 700; background: var(--yta-lugn); }

/* -------------------------------------------------------------- rörelse */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------- insikt-artikelblock
   Innehållsklasser som insikt-sidorna använder (källförteckning, finstilt, klusterlänk,
   checklista, FAQ). Definieras här eftersom insikt-sidorna laddar tokens.css — håller dem
   stylade tills insikt-generatorn (scripts/bygg-insikt.ts) äger dem i sin egen mall. */
.fq-sektion { margin-top: var(--steg-6, 2.5rem); }
.checklista { list-style: none; padding-left: 0; margin: 1rem 0; }
.checklista > li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.checklista > li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.kallor { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linje); font-size: 14px; color: var(--text-svag); }
.finstilt { font-size: 13.5px; color: var(--text-svag); }
.klusterlank { margin: 1rem 0; font-weight: 600; }
.klusterlank a { color: var(--lank); }