/*
  Kundkontakter – designtokens (designskiss v2, 2026-10-05)

  Alla designvärden för urvalsbyggaren som CSS-variabler på :root. components.css använder bara
  de här variablerna. Ändra ett värde här, så följer alla komponenter med.

  Namnregler
    --kk-color-*        färger, namngivna efter roll
    --kk-font-*         typsnitt, vikter, radavstånd, spärrning
    --kk-font-size-*    typskala. Inter: 3xs … 6xl. Instrument Serif: display-2xs … display-4xl
    --kk-space-N        avståndsskala, N = pixlar (padding, marginal, glapp, placering)
    --kk-size-*         mått på komponenter (höjder, bredder)
    --kk-icon-*         ikonstorlekar och linjetjocklekar
    --kk-radius-*       hörnradier
    --kk-border-*       linjetjocklekar
    --kk-shadow-*       skuggor
    --kk-gradient-*     gradienter
    --kk-z-*            staplingsordning
    --kk-opacity-*      genomskinlighet

  Brytpunkter (kan inte vara CSS-variabler, eftersom var() inte fungerar i @media och @container):
    Skissen är ritad i två bredder: desktop 1440 × 900 och mobil 390 × 844.
    components.css byter till mobilformen när .kk-app är högst 767 px bred
    (@container kk-app (max-width: 767px)). Gränsen 768 px är ett förslag. Skissen visar inte
    bredderna mellan 391 och 1439 px. Innehållet behöver minst cirka 1100 px
    (innehåll + 64 px glapp + 392 px Ditt urval + 2 × 48 px marginal), men sidhuvudet med
    stegraden behöver mer och har luft först från 1240 px. Desktopformen rekommenderas därför
    från 1240 px (docs/05-responsivitet.md avsnitt 2).
*/

:root {
  /* ---------- Färger: varumärke ---------- */
  --kk-color-brand: #174d48;            /* Grön. Valt läge, primärknapp, länkar, ikoner och "Ditt urval" */
  --kk-color-brand-secondary: #286b60;  /* Mellangrön. Stegrubriken ovanför H1 ("Steg 2 av 6") */
  --kk-color-brand-highlight: #22625a;  /* Ljus grön. Gradientens ljusa hörn i Ditt urval, mobillisten och arket */
  --kk-color-brand-shade: #113a36;      /* Mörk grön. Gradientens mörka kant */
  --kk-color-brand-deep: #123d39;       /* Mörkaste grön. Finns i skissens palett men används inte på någon skärm */
  --kk-color-lime: #d9ee92;             /* Lime. Antalet, knappen framåt och markeringar på grön botten */
  --kk-color-lime-soft: #eef7cf;        /* Ljus lime. Finns i skissens palett men används inte på någon skärm */
  --kk-color-on-lime: #0f2f2b;          /* Text och ikoner på limefärgade knappar */
  --kk-color-on-brand: #ffffff;         /* Text på grön botten: aktivt steg, valda knappar, k-märket */

  /* ---------- Färger: text ---------- */
  --kk-color-ink: #183029;              /* Bläck. Rubriker och brödtext */
  --kk-color-muted: #5b6f65;            /* Dämpad. Ingresser, hjälptext, inaktiva steg */
  --kk-color-placeholder: #98a69e;      /* Platshållartext i fält och dämpad tabellrubrik */

  /* ---------- Färger: ytor ---------- */
  --kk-color-bg: #f5f6f2;               /* Sidans bakgrund */
  --kk-color-surface: #ffffff;          /* Kort, fält, knappar och kartkontroller */
  --kk-color-surface-translucent: rgba(255, 255, 255, .55); /* Sidhuvudets halvgenomskinliga botten */
  --kk-color-surface-selected: #fbfdf8; /* Valt svarskort */
  --kk-color-surface-subtle: #f6f9f4;   /* Markerad rad i förslagslistan, betalningsrutan */
  --kk-color-soft: #edf3ec;             /* Ljusgrön. Ikonplattor, chips och klara steg */
  --kk-color-success-ring: #e4eedf;     /* Ringen runt bocken på kvittot */

  /* ---------- Färger: linjer och spår ---------- */
  --kk-color-line: #e1e7e2;             /* Tunna linjer och kortkanter */
  --kk-color-line-strong: #cfd9d1;      /* Kanter på fält, knappar och svarskort; avstängd strömbrytare */
  --kk-color-track: #e3eae4;            /* Reglagets spår */
  --kk-color-progress-track: #dfe7e1;   /* Mobilens stegstaplar som inte är nådda */

  /* ---------- Färger: på grön botten (Ditt urval, mobillisten, arket) ---------- */
  --kk-color-on-dark: #ffffff;                          /* Värden och rubriker */
  --kk-color-on-dark-strong: rgba(255, 255, 255, .92);  /* "matchande kontakter" under antalet */
  --kk-color-on-dark-link: rgba(255, 255, 255, .85);    /* Ändra, Börja om, prisrader */
  --kk-color-on-dark-icon: rgba(255, 255, 255, .8);     /* Pilen som öppnar arket i mobillisten */
  --kk-color-on-dark-heading: rgba(255, 255, 255, .75); /* Arkets rubrik "Ditt urval" */
  --kk-color-on-dark-label: rgba(255, 255, 255, .72);   /* Rubriken "Ditt urval"/"Ditt köp", mobillistens undertext */
  --kk-color-on-dark-muted: rgba(255, 255, 255, .64);   /* Priset per kontakt */
  --kk-color-on-dark-fine: rgba(255, 255, 255, .62);    /* Finstilt längst ned */
  --kk-color-on-dark-key: rgba(255, 255, 255, .6);      /* Radnamn (Målgrupp, Område …) */
  --kk-color-on-dark-disabled: rgba(255, 255, 255, .36);/* Steg som inte är nådda */
  --kk-color-on-dark-handle: rgba(255, 255, 255, .3);   /* Arkets dragreglage */
  --kk-color-on-dark-spinner-track: rgba(255, 255, 255, .25); /* Laddningsindikatorns spår */
  --kk-color-on-dark-divider-strong: rgba(255, 255, 255, .14); /* Linjen ovanför raderna */
  --kk-color-on-dark-divider: rgba(255, 255, 255, .12); /* Linjen mellan raderna */
  --kk-color-on-dark-fill: rgba(255, 255, 255, .1);     /* Arkets stängknapp */

  /* ---------- Färger: övrigt ---------- */
  --kk-color-scrim: rgba(16, 42, 35, .45);          /* Mörkläggningen bakom arket */
  --kk-color-map-ui-text: #5f6368;                  /* Google Maps: logotyptext och attribution */
  --kk-color-map-ui-ink: #3c4043;                   /* Google Maps: text i instruktionsrutan */
  --kk-color-map-ui-backdrop: rgba(255, 255, 255, .75); /* Google Maps: bakom attributionen */
  --kk-color-map-ui-halo: #ffffff;                  /* Google Maps: glorian runt logotyptexten */

  /* ---------- Typsnitt ---------- */
  --kk-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Allt utom rubriker och stora tal */
  --kk-font-serif: "Instrument Serif", Georgia, serif;  /* Frågerubriker (H1) och stora tal */
  --kk-font-ligatures: none;            /* Skissen stänger av ligaturer i hela gränssnittet */

  --kk-font-weight-regular: 400;        /* Brödtext; Instrument Serif har bara den här vikten */
  --kk-font-weight-medium: 500;         /* Stegraden, bakåtlänken, värden i Ditt urval */
  --kk-font-weight-semibold: 600;       /* Rubriker i kort, knappar, länkar, etiketter */
  --kk-font-weight-cta: 650;            /* Limeknappar. Med Inter deklarerad per vikt (400, 500, 600, 700), som i fonts.css, ritas den som 700 */
  --kk-font-weight-bold: 700;           /* Kundkontakter-namnet */

  --kk-line-height-base: 1.5;           /* Standard för all text */
  --kk-line-height-snug: 1.45;          /* Brödtext i svarskort och tipsrader */
  --kk-line-height-title: 1.04;         /* H1 på desktop */
  --kk-line-height-title-mobile: 1.05;  /* H1 på mobil, antalet i svarskort på desktop */
  --kk-line-height-count-mobile: 1.1;   /* Antalet i svarskort på mobil */
  --kk-line-height-mobile-bar: 1.15;    /* Antalet i mobillisten */
  --kk-line-height-none: 1;             /* k-märket och de stora talen i Ditt urval och arket */

  --kk-letter-spacing-serif: -0.012em;  /* All text i Instrument Serif utom totalsumman */
  --kk-letter-spacing-total: -0.01em;   /* Totalsumman i Ditt köp */
  --kk-letter-spacing-brand: -0.45px;   /* Kundkontakter-namnet */
  --kk-letter-spacing-card-title: -0.2px; /* Rubriker i svarskort */
  --kk-letter-spacing-mobile-count: -0.3px; /* Antalet i mobillisten */
  --kk-letter-spacing-map-logo: -0.2px; /* Google-texten i kartan */

  /* ---------- Typskala: Inter ---------- */
  --kk-font-size-3xs: 11px;             /* Kartans attribution */
  --kk-font-size-2xs: 12px;             /* Siffran i stegcirkeln */
  --kk-font-size-xs: 13.5px;            /* Status och ordernummer i Ditt urval, mobillistens undertext */
  --kk-font-size-sm: 14px;              /* Hjälptext, tabeller, radnamn, sidfot, stegraden */
  --kk-font-size-sm-plus: 14.5px;       /* Fältetiketter, rubriken i Ditt urval, segmentknappar, Förhandsvisa (mobil) */
  --kk-font-size-md: 15px;              /* Bakåtlänk, stegrubrik, kortens brödtext, chips, länkar, tipsrader */
  --kk-font-size-md-plus: 15.5px;       /* Mitt konto, snabbval, sekundärknapp, fördelar, rubriktext i Ditt urval */
  --kk-font-size-base: 16px;            /* Brödtext */
  --kk-font-size-base-plus: 16.5px;     /* Limeknappen, kompakta svarskort, startkortens text */
  --kk-font-size-lg: 17px;              /* Fält, svarskortens rubrik (steg 3 och mobil), namnet på mobil */
  --kk-font-size-xl: 18px;              /* Ingress, svarskortens rubrik, kortrubrik på kvittot */
  --kk-font-size-xl-plus: 18.5px;       /* Kundkontakter-namnet */
  --kk-font-size-2xl: 19px;             /* Ingressen i steg 1 */
  --kk-font-size-3xl: 21px;             /* Antalet i mobillisten */
  --kk-font-size-4xl: 22px;             /* Antalsfältet på mobil */
  --kk-font-size-5xl: 24px;             /* Antalsfältet, startkortens rubrik, k-märket på mobil */
  --kk-font-size-6xl: 28px;             /* k-märket */

  /* ---------- Typskala: Instrument Serif ---------- */
  --kk-font-size-display-2xs: 30px;     /* Antalet i svarskort, mobil */
  --kk-font-size-display-xs: 34px;      /* H1 på mobil, totalsumman */
  --kk-font-size-display-sm: 44px;      /* H1 på kvittot, mobil */
  --kk-font-size-display-md: 46px;      /* Antalet i svarskort, H1 i steg 1 på mobil */
  --kk-font-size-display-lg: 54px;      /* H1 */
  --kk-font-size-display-xl: 58px;      /* Antalet i arket Ditt urval */
  --kk-font-size-display-2xl: 66px;     /* H1 på kvittot */
  --kk-font-size-display-3xl: 68px;     /* Antalet i Ditt urval */
  --kk-font-size-display-4xl: 80px;     /* H1 i steg 1 */

  /* ---------- Avstånd (N = pixlar) ---------- */
  --kk-space-1: 1px;
  --kk-space-2: 2px;
  --kk-space-3: 3px;
  --kk-space-4: 4px;
  --kk-space-5: 5px;
  --kk-space-6: 6px;
  --kk-space-7: 7px;
  --kk-space-8: 8px;
  --kk-space-9: 9px;
  --kk-space-10: 10px;
  --kk-space-11: 11px;
  --kk-space-12: 12px;
  --kk-space-13: 13px;
  --kk-space-14: 14px;
  --kk-space-16: 16px;
  --kk-space-18: 18px;
  --kk-space-20: 20px;
  --kk-space-22: 22px;
  --kk-space-24: 24px;
  --kk-space-26: 26px;
  --kk-space-28: 28px;
  --kk-space-30: 30px;
  --kk-space-34: 34px;
  --kk-space-38: 38px;
  --kk-space-40: 40px;
  --kk-space-44: 44px;
  --kk-space-48: 48px;              /* Sidans marginal på desktop */
  --kk-space-52: 52px;              /* Indrag för innehållet i en öppen filterrad */
  --kk-space-56: 56px;
  --kk-space-64: 64px;              /* Glappet mellan frågan och Ditt urval */
  --kk-space-70: 70px;
  --kk-space-76: 76px;              /* Kartans zoomknappar: under sökfältet (14 + 46 + 16) */
  --kk-space-110: 110px;            /* Arkets avstånd från skärmens överkant (mobil) */

  /* ---------- Mått: layout ---------- */
  --kk-size-header: 76px;           /* Sidhuvudets höjd, desktop */
  --kk-size-header-mobile: 58px;    /* Sidhuvudets höjd, mobil */
  --kk-size-content-max: 1344px;    /* Största bredd för tvåkolumnslayouten */
  --kk-size-aside: 392px;           /* Bredden på Ditt urval */
  --kk-size-start-max: 1000px;      /* Största bredd i steg 1 */
  --kk-size-receipt-max: 760px;     /* Största bredd på kvittot */
  --kk-size-lead-max: 660px;        /* Största bredd för ingresser */
  --kk-size-mobile-bar: 92px;       /* Mobillistens höjd */

  /* ---------- Mått: kontroller ---------- */
  --kk-size-input: 56px;            /* Fält */
  --kk-size-input-filter: 52px;     /* Sökfält i en öppen filterrad */
  --kk-size-input-range: 50px;      /* Fält för reglagets värden; vanliga fält på mobil */
  --kk-size-input-range-mobile: 48px; /* Fält för reglagets värden, mobil */
  --kk-size-input-quantity: 62px;   /* Antalsfältet */
  --kk-size-input-quantity-mobile: 58px; /* Antalsfältet, mobil */
  --kk-size-input-quantity-width: 260px; /* Antalsfältets bredd, desktop */
  --kk-size-range-field: 150px;     /* Bredden på Från/Till-fälten */
  --kk-size-cta: 58px;              /* Limeknappen; nedladdningsknapparna på kvittot */
  --kk-size-download-mobile: 54px;  /* Nedladdningsknapparna på kvittot, mobil */
  --kk-size-button: 52px;           /* Primärknapp; limeknappen i mobillisten */
  --kk-size-button-secondary: 46px; /* Sekundärknapp; knapparna i kartan */
  --kk-size-button-map-mobile: 44px; /* Kartans knapp och sökfält på mobil */
  --kk-size-quick-choice: 42px;     /* Snabbval av antal */
  --kk-size-quick-choice-mobile: 38px; /* Snabbval av antal, mobil */
  --kk-size-chip: 36px;             /* Chips; segmentknappar; mobilens rundknappar */
  --kk-size-map: 398px;             /* Kartans höjd, desktop */
  --kk-size-map-mobile: 350px;      /* Kartans höjd, mobil */
  --kk-size-map-search: 300px;      /* Kartans sökfält, desktop */
  --kk-size-map-zoom-w: 40px;       /* Kartans zoomknappar */
  --kk-size-map-zoom-h: 38px;
  --kk-size-map-zoom-divider: 26px; /* Linjen mellan + och − */
  --kk-size-caret: 22px;            /* Den ritade textmarkören i sökfält, höjd */
  --kk-size-caret-w: 1.5px;         /* Den ritade textmarkören, bredd */
  --kk-size-option-audience: 214px; /* Minsta höjd för startkorten i steg 1 */

  /* ---------- Mått: märken, plattor och indikatorer ---------- */
  --kk-size-mark-w: 36px;           /* k-märket */
  --kk-size-mark-h: 38px;
  --kk-size-mark-w-mobile: 32px;
  --kk-size-mark-h-mobile: 34px;
  --kk-size-mark-dot: 6px;          /* Limepricken i k-märket */
  --kk-size-mark-dot-mobile: 5px;
  --kk-size-avatar: 34px;           /* Rundeln vid Mitt konto */
  --kk-size-step-marker: 24px;      /* Cirkeln med stegets nummer */
  --kk-size-step-separator: 16px;   /* Linjen mellan stegen */
  --kk-size-step-separator-h: 1.5px;
  --kk-size-icon-well-xl: 58px;     /* Ikonplatta i startkorten */
  --kk-size-icon-well: 48px;        /* Ikonplatta, standard */
  --kk-size-icon-well-sm: 42px;     /* Ikonplatta i kompakta kort; standard på mobil */
  --kk-size-icon-well-xs: 40px;     /* Ikonplatta i betalningsrutan */
  --kk-size-icon-well-row: 38px;    /* Ikonplatta i filterrader; leveranskortet på mobil */
  --kk-size-icon-well-row-mobile: 34px; /* Ikonplatta i filterrader, mobil */
  --kk-size-round-button: 44px;     /* Den runda pilen i startkorten */
  --kk-size-radio: 24px;            /* Radioringen i svarskort */
  --kk-size-check-badge: 26px;      /* Bocken i valt svarskort */
  --kk-size-checkbox: 22px;         /* Kryssrutan i förslagslistan */
  --kk-size-switch-w: 50px;         /* Strömbrytaren */
  --kk-size-switch-h: 30px;
  --kk-size-switch-thumb: 24px;
  --kk-size-range-track: 6px;       /* Reglagets spår */
  --kk-size-range-handle: 28px;     /* Reglagets handtag */
  --kk-size-spinner: 16px;          /* Laddningsindikatorn */
  --kk-size-success: 84px;          /* Bocken på kvittot */
  --kk-size-success-mobile: 72px;
  --kk-size-progress-bar: 4px;      /* Mobilens stegstaplar; arkets dragreglage */
  --kk-size-sheet-handle: 40px;     /* Arkets dragreglage, bredd */
  --kk-size-review-key: 170px;      /* Namnkolumnen i sammanställningen i steg 5 */
  --kk-size-summary-key: 136px;     /* Namnkolumnen i Ditt urval */
  --kk-size-sheet-key: 96px;        /* Namnkolumnen i arket */

  /* ---------- Ikoner ---------- */
  --kk-icon-size-14: 14px;          /* Bocken i ett klart steg */
  --kk-icon-size-15: 15px;          /* Bocken i valt svarskort */
  --kk-icon-size-16: 16px;          /* Ikoner i chips */
  --kk-icon-size-17: 17px;          /* Segmentknappar, finstilt i Ditt köp, mobilens bakåtknapp */
  --kk-icon-size-18: 18px;          /* Mitt konto, bakåtlänk, filterradens pil, kartans kontroller, arket */
  --kk-icon-size-19: 19px;          /* Knappar, filterradens ikonplatta, kartans sökfält */
  --kk-icon-size-20: 20px;          /* Tipsrader */
  --kk-icon-size-22: 22px;          /* Standard */
  --kk-icon-size-27: 27px;          /* Startkortens ikoner */
  --kk-icon-size-34: 34px;          /* Bocken på kvittot, mobil */
  --kk-icon-size-40: 40px;          /* Bocken på kvittot */
  --kk-icon-stroke: 1.8;            /* Standard linjetjocklek */
  --kk-icon-stroke-cta: 2.1;        /* Pilar i limeknappar */
  --kk-icon-stroke-success: 2.4;    /* Bocken på kvittot */
  --kk-icon-stroke-step: 2.6;       /* Bocken i ett klart steg */
  --kk-icon-stroke-badge: 2.8;      /* Bocken i valt svarskort */

  /* ---------- Hörnradier ---------- */
  --kk-radius-2xs: 4px;             /* Attribution, mobilens stegstaplar, arkets dragreglage */
  --kk-radius-xs: 6px;              /* Reglagets spår, kryssrutan */
  --kk-radius-sm: 9px;              /* Segmentknappar, k-märket på mobil */
  --kk-radius-mark: 10px;           /* k-märket */
  --kk-radius-icon-row: 11px;       /* Ikonplattan i filterrader */
  --kk-radius-md: 12px;             /* Kartkontroller, sekundärknapp, segmentrad, ikonplattor på mobil */
  --kk-radius-lg: 14px;             /* Fält, primärknapp, förslagslista, ikonplattor, betalningsrutan */
  --kk-radius-xl: 16px;             /* Filterrader, limeknappar, startkortens ikonplatta */
  --kk-radius-2xl: 20px;            /* Kort, svarskort, kartan */
  --kk-radius-mobile-bar: 22px;     /* Mobillistens övre hörn */
  --kk-radius-sheet: 24px;          /* Arkets övre hörn */
  --kk-radius-summary: 26px;        /* Ditt urval */
  --kk-radius-pill: 999px;          /* Chips, snabbval, steg, strömbrytaren */
  --kk-radius-round: 50%;           /* Cirklar */

  /* ---------- Linjer ---------- */
  --kk-border-width: 1px;           /* Kortkanter och avdelare */
  --kk-border-width-control: 1.5px; /* Fält, knappar, radioringar */
  --kk-border-width-selected: 2px;  /* Valt kort, öppen filterrad, reglagets handtag, laddningsindikatorn */
  --kk-underline-offset: 3px;       /* Understrykningens avstånd i länkar */

  /* ---------- Skuggor ---------- */
  --kk-shadow-card: 0 1px 2px rgba(16, 48, 44, .04), 0 10px 28px -14px rgba(16, 48, 44, .12); /* Vita kort */
  --kk-shadow-option: 0 1px 2px rgba(16, 48, 44, .04);          /* Svarskort, ej valt */
  --kk-shadow-selected: 0 0 0 5px rgba(23, 77, 72, .07);        /* Ring runt valt kort och öppen filterrad */
  --kk-shadow-focus: 0 0 0 4px rgba(23, 77, 72, .12);           /* Fält med fokus */
  --kk-shadow-summary: 0 34px 60px -26px rgba(15, 48, 44, .55); /* Ditt urval */
  --kk-shadow-map-control: 0 6px 18px rgba(16, 48, 44, .16);    /* Vita kontroller ovanpå kartan */
  --kk-shadow-map-primary: 0 6px 18px rgba(16, 48, 44, .25);    /* "Använd kartområdet" ovanpå kartan */
  --kk-shadow-switch-thumb: 0 1px 3px rgba(16, 48, 44, .3);     /* Strömbrytarens tumme */
  --kk-shadow-range-handle: 0 2px 6px rgba(16, 48, 44, .18);    /* Reglagets handtag */
  --kk-shadow-success: 0 0 0 12px var(--kk-color-success-ring); /* Ringen runt bocken på kvittot */
  --kk-shadow-success-mobile: 0 0 0 10px var(--kk-color-success-ring);
  --kk-text-shadow-map-logo: 0 0 3px var(--kk-color-map-ui-halo), 0 0 3px var(--kk-color-map-ui-halo); /* Google-texten */

  /* ---------- Gradienter ---------- */
  --kk-gradient-summary: radial-gradient(130% 90% at 100% 0%, var(--kk-color-brand-highlight) 0%, var(--kk-color-brand) 46%, var(--kk-color-brand-shade) 100%); /* Ditt urval och arket */
  --kk-gradient-mobile-bar: radial-gradient(120% 120% at 100% 0%, var(--kk-color-brand-highlight) 0%, var(--kk-color-brand) 50%, var(--kk-color-brand-shade) 100%); /* Mobillisten */

  /* ---------- Staplingsordning (mobil) ---------- */
  --kk-z-scrim: 4;                  /* Mörkläggningen bakom arket */
  --kk-z-mobile-bar: 5;             /* Mobillisten */
  --kk-z-sheet: 6;                  /* Arket Ditt urval */

  /* ---------- Genomskinlighet ---------- */
  --kk-opacity-pending: .55;        /* Antalet i Ditt urval medan kartområdet inte är använt */
  --kk-opacity-pending-mobile: .6;  /* Samma sak i mobillisten */
}