/* TOKENS — sajtens färger och mått, på ett ställe.
 *
 * KÄLLA: designhandoffen från Claude Design ("Lagledare designsystem",
 * 2026-08-27), filen tokens.css. Namnen och värdena här är EXAKT desamma som
 * i handoffen, med flit — då går nästa designleverans att diffa rakt av mot
 * den här filen i stället för att översättas för hand.
 *
 * REGELN: referera aldrig till en hex-kod direkt i mallarna eller i
 * komponenter.css. Använd namnen härifrån. Namnen säger vad färgen är till
 * för, inte vilken kulör den har — därför går det att byta kulör utan att
 * leta igenom hela sajten.
 *
 * TRE REGLER RÄCKER FÖR ATT ANVÄNDA FÄRGERNA RÄTT
 *
 *   1. Text är alltid --text eller --blaa-text. Aldrig --blaa-signal, aldrig
 *      gul. (Enda undantaget: --gul som RUBRIKFÄRG på blå botten.)
 *
 *   2. Gult är en bakgrund, inte en textfärg.
 *      Stark gul till knappar, ljusa gula toner till plattor med text på.
 *
 *   3. Färg får aldrig vara enda signalen.
 *      Hemmamatch skriver ut ordet HEMMA, aktiv meny har understrykning,
 *      länkar i löpande text är understrukna.
 *
 * Uppmätta kontrastvärden (alla AAA för brödtext, mätta i handoffen):
 *   --text på --papper 17,1:1 · --blaa-text på --papper 9,9:1 ·
 *   --graa på --papper 7,2:1 · vit på --blaa-text 10,5:1 ·
 *   --blaa-text på --gul-platta 9,3:1 · på --gul-not 9,9:1 ·
 *   på --gul-etikett 8,7:1 · på --gul 7,2:1.
 * Underkänt och förbjudet för text: --blaa-signal på --papper (3,9:1) och
 * --gul på --blaa-signal (2,9:1). De lever bara i logotyp och dekor.
 * Byter du en kulör: mät om på webaim.org/resources/contrastchecker.
 */

:root {

  /* === YTOR ============================================================== */

  --papper:       #FAF8F4;   /* sidbakgrund */
  --papper-mork:  #F2EEE6;   /* ytan utanför sidan i designarket — ingen roll i produktion */
  --vit:          #FFFFFF;   /* panelbakgrund, kort, nyhetspanelen */


  /* === TEXT ============================================================== */

  --text:         #10161F;   /* all brödtext och alla rubriker på ljus botten */
  --graa:         #4A5462;   /* metadata: datum, tider, filstorlek, hjälptext */


  /* === BLÅTT ============================================================= */

  --blaa-text:    #0B3A8C;   /* länkar, knappar, sidhuvud, primär accent */
  --blaa-mork:    #0A2A63;   /* sidfoten — mörkare med flit, sidan ska kännas avslutad */
  --blaa-signal:  #1A76FF;   /* klubbens signalblå: DEKOR OCH FOKUSRING. ALDRIG TEXT. */


  /* === GULT ============================================================== */

  --gul:           #FFD21E;  /* knappar, accentytor, rubriker på blå botten */
  --gul-platta:    #FFF1C4;  /* framhävt rollkort, mobilens rollval, prova-på-rutan */
  --gul-not:       #FFF8E2;  /* notrutor i artiklar */
  --gul-etikett:   #FFE9A3;  /* HEMMA-etiketten */
  --gul-fakta:     #FFF6D9;  /* faktarutan på rollingångarna */
  --gul-not-ram:   #F0DFA6;  /* ram runt notruta */
  --gul-platta-ram:#F1E3B0;  /* ram runt faktaruta */


  /* === LINJER OCH RAMAR ================================================== */

  --linje:        #EDE7DB;   /* avdelare mellan sidans stora block */
  --linje-svag:   #F0EAE0;   /* avdelare mellan rader inuti en lista — ljusare med flit */
  --linje-ram:    #E5DFD2;   /* ram runt kort och paneler */
  --linje-ram-2:  #E1DACB;   /* ram runt länkkort */
  --ram-knapp:    #B9C6DE;   /* ram runt sekundär knapp */
  --linje-blaa:   rgba(255, 255, 255, 0.35); /* avdelare på blå botten */
  --fot-text:     #D7DBE2;   /* dämpad text i sidfoten */
  --kontaktkort:  #F7F4EC;   /* botten på kontaktkorten i rollingångens sidopanel */


  /* === RADIER — inga andra värden än dessa ============================== */

  --r-yta:   20px;   /* hela ytor (används inte i dag: sidan är kant-i-kant) */
  --r-panel: 16px;   /* paneler, notrutor, kort */
  --r-kort:  14px;   /* länkkort, bildplatshållare, kontaktkort */
  --r-liten: 12px;   /* sponsorplattor */
  --r-pill:  999px;  /* knappar och etiketter — helrunda ändar */


  /* === TYPOGRAFI ========================================================= */

  --font: 'Archivo', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;


  /* === MÅTT ============================================================== */

  --sida-max:  1200px;  /* innehållsbredd */
  --text-max:  640px;   /* textkolumn i artiklar, ~65 tecken per rad */
  --gutter:    40px;    /* horisontell marginal på desktop */
  --gutter-m:  16px;    /* horisontell marginal på mobil */
  --traffyta:  44px;    /* minsta klick- och tryckyta (WCAG 2.5.5) */

  /* Platshållarmönster för bilder som ännu inte finns. En platshållare
     betyder att ett riktigt foto ska in — inte att texten får kortas. */
  --platshallare: repeating-linear-gradient(135deg, #F4F0E8 0 11px, #FBF9F5 11px 22px);
}