/* =========================================================
   E. NILSSONS , DESIGNTOKENS
   =========================================================
   Palett beslutad 2026-08-12. Underlag:
   - Lars önskemål: blå #24366e, i övrigt "vitt och rent"
   - Referens: gotmars.se (vitt plus varma off-whites, mörk text)
   - Logotypen: fågelgul #F9B000 behålls som signatur

   REGEL: signaturgult är ett grafiskt element, aldrig brödtext
   på ljus botten. Behöver gult bäras av text används ockran.
   ========================================================= */

:root {
	/* ---- Primär, Lars blå ---- */
	--enil-bla:        #24366e;
	--enil-bla-mork:   #1a2850;  /* hover och aktivt läge */
	--enil-bla-ljus:   #eef1f8;  /* bottenplatta juridikkort, kontorskort, bokningsruta */
	--enil-bla-ljus-2: #e4e9f4;  /* samma yta i hover- och fokusläge */

	/* ---- Ytor ---- */
	--enil-vit:        #ffffff;
	--enil-varm:       #f4f1ec;  /* hero och begravningskort */
	--enil-kant:       #e3e6ec;

	/* ---- Text ---- */
	--enil-text:       #23262d;
	--enil-text-dampad: #5c6472;
	--enil-text-invers: #ffffff;

	/* ---- Signatur ---- */
	--enil-gul:        #f9b000;  /* fågeln, ikondetaljer. ALDRIG text på ljust */
	--enil-ockra:      #8a5b00;  /* när gult måste bäras av text */

	/* ---- Status ---- */
	--enil-fel:        #b3261e;
	--enil-ok:         #1e6b40;

	/* ---- Typografi ----
	   Source Sans 3 är en humanistisk sans med öppna former, fri licens
	   (OFL) och full täckning för å ä ö. Den ger Götmars lugn utan att
	   kräva Avenirs licens. Självhostas som woff2, se assets/fonts/. */
	--enil-font:       "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
	--enil-font-rubrik: var(--enil-font);

	/* Fluid typskala. Brödtext minst 18px på desktop, 16 på mobil. */
	--enil-text-xs:    0.875rem;
	--enil-text-sm:    1rem;
	--enil-text-bas:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--enil-text-lg:    clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--enil-text-xl:    clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--enil-text-2xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
	--enil-text-3xl:   clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	--enil-text-4xl:   clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);

	--enil-radhojd:    1.65;
	--enil-radhojd-rubrik: 1.15;
	--enil-radlangd:   68ch;

	/* Läsbredd för textsidor.
	   OBS varför rem och inte ch: ch räknas mot elementets EGEN
	   fontstorlek. På en H1 i 56 px blir 72ch nästan 1900 px, alltså
	   full bredd, medan samma regel på brödtext ger 600 px. Rubriken
	   hamnade därför långt till vänster om innehållet under den.
	   rem är oberoende av elementets fontstorlek och håller ihop
	   spalten. */
	--enil-lasbredd:   46rem;

	/* ---- Mellanrum ---- */
	--enil-rum-1:      0.25rem;
	--enil-rum-2:      0.5rem;
	--enil-rum-3:      0.75rem;
	--enil-rum-4:      1rem;
	--enil-rum-5:      1.25rem;
	--enil-rum-6:      1.5rem;
	--enil-rum-8:      2rem;
	--enil-rum-12:     3rem;
	--enil-rum-16:     4rem;
	--enil-rum-20:     5rem;
	/* Luft mellan sektioner. FASTA steg, inte flytande, 2026-09-10.
	   Lina: "definiera radavstånd och sätt fasta". Referensen är
	   avståndet från heron till "Begravningar" på startsidan, uppmätt
	   96 px på desktop. Det är samma steg överallt. Brytpunkterna
	   ligger längst ned i filen. Två sektioner i rad får aldrig dubbel
	   luft, se .enil-sektion + .enil-sektion i core.css. */
	--enil-sektion:    6rem;

	/* ---- Form ---- */
	--enil-radie:      6px;
	--enil-radie-stor: 10px;
	--enil-skugga:     0 1px 2px rgba(35, 38, 45, 0.06), 0 4px 12px rgba(35, 38, 45, 0.06);

	/* ---- Layout ---- */
	--enil-bredd:      1200px;
	--enil-marginal:   max(1.25rem, (100vw - var(--enil-bredd)) / 2);

	/* ---- Tap targets, WCAG 2.2 AA ---- */
	--enil-traffyta:   48px;
}

@media (max-width: 1024px) {
	:root { --enil-sektion: 4.5rem; }
}

@media (max-width: 600px) {
	:root { --enil-sektion: 3rem; }
}

/* Respektera användarens inställning. Ingen animation får fördröja
   telefonnummer, sökning eller formulär. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}