/* ==========================================================================
   01 – VARIABLER
   --------------------------------------------------------------------------
   Det ENESTE stedet i temaet der farger, størrelser, avstander, hjørner,
   skrifter og skygger har en verdi. Alle andre filer bruker var(--kc-…).

   Verdiene kommer fra designsystemet «KanonCon» (tokens.json). Navnene er
   de samme som i pluginen kanoncon-design på kanoncon.no, så CSS kan
   flyttes mellom nettbutikken og B2B-siden.

   Ny farge eller størrelse? Legg den i designsystemet først, så her.
   Bruddpunkt mobil/PC er 850 px (CSS-variabler kan ikke brukes i
   media queries, så tallet står i hver @media – søk etter «849px»).
   ========================================================================== */

:root {

	/* ---- Logofarger (tokens kanon-*) ------------------------------------ */
	--kc-navy:        #274477; /* kanon-navy – hovedfarge, tekst på hvit */
	--kc-navy-lys:    #305392; /* kanon-navy-lys – lys kant i bannergradient */
	--kc-navy-mork:   #182a49; /* kanon-navy-mork – mørk kant i gradient, alle skygger */
	--kc-blue:        #2694cc; /* kanon-blue – aksent, aldri brødtekst */
	--kc-green:       #74af73; /* kanon-green – aksent, statusprikk «på lager» */
	--kc-red:         #e23c4e; /* kanon-red – aksent, statusprikk «utsolgt» */
	--kc-orange:      #f9a73f; /* kanon-orange – aksent, statusprikk «bestillingsvare» */
	--kc-white:       #ffffff; /* white */

	/* ---- Dempede flater og tekst til merker og varsler ------------------ */
	--kc-orange-dempet: #fbeedd; /* bunn: «Venter», advarsel */
	--kc-orange-tekst:  #8a5212; /* tekst på orange-dempet */
	--kc-red-dempet:    #f8e8eb; /* bunn: «Venter på betaling», feil */
	--kc-red-tekst:     #a3283a; /* tekst på red-dempet */
	--kc-blue-dempet:   #e3f0f8; /* bunn: «Behandles» */
	--kc-blue-tekst:    #1c6a93; /* tekst på blue-dempet */
	--kc-green-dempet:  #e6f2e8; /* bunn: «Sendt/Fullført», hake-sirkler */
	--kc-green-tekst:   #2f6b2e; /* tekst på green-dempet, «3 i handlekurven» */
	--kc-green-ikon:    #4f9a4e; /* haker og ikoner på green-dempet */
	--kc-green-merke:   #4b824a; /* bunn i «Nyhet»-merket */

	/* ---- Kategoriflater (logofargene 36 % mot hvit, tokens kanon-*-flate) - */
	--kc-orange-flate:  #fde7ba; /* kategorifliser; tekst kanon-navy */
	--kc-red-flate:     #f5b9bf;
	--kc-blue-flate:    #b1d8ed;
	--kc-green-flate:   #cde2cd;

	/* ---- Roller (bruk disse i komponentene, ikke logofargene direkte) --- */
	--kc-surface:         var(--kc-white); /* sidebakgrunn */
	--kc-surface-raised:  #f2f5fa;         /* infokort, søkefelt, hover */
	--kc-ink:             var(--kc-navy);  /* all tekst */
	--kc-ink-muted:       #5b6a8a;         /* sekundærtekst på lys bunn */
	--kc-ink-muted-mork:  #c3cde0;         /* sekundærtekst på marine (ink-muted i marine-temaet) */
	--kc-line:            #e3e8f0;         /* dekorative streker og kortkanter */
	--kc-line-mork:       #3a578c;         /* strek på marine (line i marine-temaet) */
	--kc-line-control:    #7f8ca3;         /* kant på felt og sekundærknapper */

	/* ---- Skrift ---------------------------------------------------------- */
	--kc-font:          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--kc-font-display:  "Peace Sans", "Arial Black", sans-serif; /* bare overskrifter, én vekt */

	/* Låst tekstskala: seks størrelser + knapp. Mobilverdier lenger ned. */
	--kc-tekst-h1:    40px;  --kc-lh-h1:    44px;
	--kc-tekst-h2:    28px;  --kc-lh-h2:    32px;
	--kc-tekst-h3:    20px;  --kc-lh-h3:    24px;
	--kc-tekst-body:  16px;  --kc-lh-body:  24px;
	--kc-tekst-liten: 14px;  --kc-lh-liten: 20px;
	--kc-tekst-mini:  12px;  --kc-lh-mini:  16px;
	--kc-tekst-knapp: 16px;  --kc-lh-knapp: 20px;

	--kc-vekt-normal: 400;
	--kc-vekt-medium: 500; /* produktnavn på kort, som kanoncon.no */
	--kc-vekt-halvfet: 600; /* toppstripen og menypunkter, som kanoncon.no */
	--kc-vekt-fet:    700;
	--kc-vekt-knapp:  800;

	/* ---- Avstander (låst til fem trinn) ---------------------------------- */
	--kc-luft-1: 4px;
	--kc-luft-2: 8px;
	--kc-luft-4: 16px;
	--kc-luft-6: 24px;
	--kc-luft-8: 32px;
	--kc-ikoninnrykk: 40px; /* tekst med ikon foran: luft-4 + ikon 20 + luft-1 */

	/* ---- Hjørner ---------------------------------------------------------- */
	--kc-r-sm:   4px;   /* merker på bilder, avkrysningsbokser */
	--kc-r-md:   8px;   /* bilderamme, menypunkter */
	--kc-r-lg:   16px;  /* kort, flater, bannere, tekstområder */
	--kc-r-pill: 999px; /* knapper og felt på én linje */
	--kc-r-rund: 50%;   /* prikker, sirkler, runde ikonknapper */

	/* ---- Størrelser ------------------------------------------------------- */
	--kc-kontroll:       48px; /* høyde på alle knapper og felt */
	--kc-knapp-luft:     var(--kc-luft-6); /* luft på sidene i knapper */
	--kc-felt-luft:      var(--kc-luft-4); /* luft på sidene i felt */
	--kc-trykkflate:     44px; /* minste trykkflate for ikonknapper */
	--kc-rundknapp:      28px; /* synlig sirkel: legg i handlekurv-pluss */
	--kc-ikon:           20px; /* strekikoner i tekst og knapper */
	--kc-ikon-liten:     16px; /* ikoner i visningsvalg */
	--kc-ikon-stor:      24px; /* ikoner i headeren */
	--kc-avkrysning:     18px; /* avkrysningsbokser og radioknapper */
	--kc-merke-hoyde:    24px; /* merker på bilder og statusmerker */
	--kc-teller:         18px; /* teller på handlekurv-ikonet (som kanoncon.no) */
	--kc-prikk:          8px;  /* statusprikk foran lagerstatus */
	--kc-prikk-liten:    6px;  /* prikker i toppstripen */
	--kc-hake-liten:     24px; /* hake-sirkel i lister */
	--kc-hake-stor:      40px; /* hake-sirkel i bekreftelse */
	--kc-fold-nr:        26px; /* nummersirkelen foran punktene i kassen */
	--kc-steg-nr:        24px; /* nummersirkelen i stegene (Handlekurv – Kasse – Bekreftelse) */
	--kc-steg-strek:     24px; /* streken mellom stegene */
	--kc-bilderamme:     48px; /* produktbilde i tabell */
	--kc-bilderamme-stor: 56px; /* produktbilde i handlekurv og kasse */
	--kc-bilderamme-luft: 3px; /* luft inne i bilderammen */
	--kc-strek:          1px;
	--kc-strek-valgt:    2px;  /* strek under valgt kategori, valgt valgboks */

	/* ---- Oppsett ---------------------------------------------------------- */
	--kc-innhold-maks:   1172px; /* 1140 px innhold + sidemarg, som headeren og radene på kanoncon.no */
	--kc-sidemarg:       var(--kc-luft-4);
	--kc-toppstripe:     36px;
	--kc-header:         84px;
	--kc-logo:           56px;
	--kc-filter-bredde:  220px;  /* filterkolonnen i katalogen */
	--kc-meny-bredde:    260px;  /* sidemenyen i Min konto */
	--kc-kort-min:       176px;  /* minste bredde på produktkort i rutenettet */
	--kc-skjema-maks:    900px;  /* innloggingssiden */
	--kc-flis-min:       160px;  /* minste bredde på kategorifliser (forsiden) */
	--kc-flis-logo:      64px;   /* høyde på kategoribildet i flisen */
	--kc-radkort:        calc((100% - var(--kc-luft-4) * 2) / 2.3); /* produktrad på mobil: 2,3 kort synlige */

	/* ---- Verdier hentet fra kanoncon.no (pluginen kanoncon-design) -------- */
	--kc-sok-hoyde:      50px;   /* søkefeltet i headeren */
	--kc-sok-maks:       640px;  /* søkefeltets maksbredde */
	--kc-ikon-header:    26px;   /* konto- og handlekurvikon */
	--kc-strek-meny:     3px;    /* strek under valgt kategori i menyen */
	--kc-meny-skille:    22px;   /* høyden på streken etter «Alle kategorier» */
	--kc-bilde-luft:     var(--kc-luft-2); /* luft rundt bildet i produktkortet */
	--kc-kort-tittel:    40px;   /* produktnavn: to linjer à 20 px */
	--kc-sperring:       0.5px;  /* bokstavavstand i merker med store bokstaver */
	--kc-understrek-luft: 3px;   /* avstand fra tekst til understreking ved hover */
	--kc-understrek-tykkelse: 1.5px; /* tykkelse på understreking ved hover (produktnavn) */
	--kc-fot-lenke:      20px;   /* linjehøyde på lenkene i bunnteksten */
	--kc-kolonne-luft:   20px;   /* mellomrom mellom produktkort (Flatsome-kolonner på kanoncon.no) */
	--kc-kolonner-katalog: 4;    /* produkter per rad i katalogen (PC) */
	--kc-kolonner-rad:   6;      /* produkter per rad på forsiden (PC) */
	--kc-kolonner-fliser: 8;     /* kategorifliser per rad (PC) */
	--kc-flis-tekst-hoyde: 28%;  /* høyden på overgangen fra bilde til flisfarge */

	/* ---- Fokus, skygge, laster, overgang --------------------------------- */
	--kc-fokus-bredde:   2px;
	--kc-fokus-luft:     2px;
	--kc-fokus-farge:    var(--kc-navy);
	--kc-fokus-farge-mork: var(--kc-white); /* på marine flater */
	--kc-skygge:         0 8px 24px rgb(24 42 73 / 18%); /* kanon-navy-mork 18 % */
	--kc-skygge-pil:     0 2px 6px rgb(24 42 73 / 18%);  /* pilsirkelen på kategorifliser */
	--kc-skygge-tekst:   0 2px 8px rgb(24 42 73 / 35%);  /* tittel på mørkt banner */
	--kc-strek-mork:     rgb(255 255 255 / 12%);         /* skillestrek på marine (bunnteksten) */
	--kc-laster-dekning: rgb(255 255 255 / 60%);         /* white 60 % over innhold som lastes */
	--kc-deaktivert:     0.4;                            /* gjennomsiktighet på deaktiverte knapper */
	--kc-overgang:       150ms ease;
	/* Mørkeblått banner – samme overgang som kategoribanneret på kanoncon.no. */
	--kc-bannergradient: radial-gradient(ellipse at 75% 100%, var(--kc-navy-lys) 0%, var(--kc-navy) 48%, var(--kc-navy-mork) 100%);
}

/* Mobil (under 850 px): bare overskriftene endrer størrelse. */
@media (max-width: 849px) {
	:root {
		--kc-tekst-h1: 28px;  --kc-lh-h1: 32px;
		--kc-tekst-h2: 22px;  --kc-lh-h2: 26px;
		--kc-tekst-h3: 18px;  --kc-lh-h3: 22px;
		--kc-logo:     48px;
		--kc-header:   64px;
		--kc-sok-hoyde: var(--kc-kontroll);
	}
}