/*
 * Design tokens. Den enda filen där färger, typsnitt, avstånd, bredder och andra designvärden definieras.
 * Ersätts per projekt med värden från Claude Designs CSS-variabler.
 * Block och mallar använder bara dessa variabler för designvärden.
 *
 * Brytpunkter kan inte ligga här, eftersom CSS-variabler inte fungerar i mediafrågor.
 * Konventionen är 48rem för mobilmenyn. Se avsnittet om brytpunkter i dokumentationen.
 *
 * Kontrollera kontrasten när värdena byts: minst 4,5:1 för text och länkar mot varje bakgrund
 * de används på (WCAG 2.2, kriterium 1.4.3).
 */
:root {
	/* Färger */
	--loft-farg-text: #1a1a1a;
	--loft-farg-text-dampad: #5c5c5c;
	--loft-farg-bakgrund: #ffffff;
	--loft-farg-yta: #f4f2ee;
	--loft-farg-mork: #141414;
	--loft-farg-accent: #b54a33;       /* 5,26:1 mot bakgrund, 4,70:1 mot yta */
	--loft-farg-accent-hover: #8f3a27; /* 7,49:1 mot bakgrund */
	--loft-farg-kant: #e2dfd9;
	--loft-farg-kant-pa-mork: rgb(255 255 255 / 0.2); /* Skiljelinjer på mörka ytor, till exempel sidfotens undre rad */

	/* Text ovanpå färgade ytor */
	--loft-farg-pa-accent: #ffffff;
	--loft-farg-pa-mork: #ffffff;
	--loft-farg-pa-bild: #ffffff;

	/* Toning över hero-bilder. Kontrollera läsbarheten med kundens riktiga bilder. */
	--loft-toning-bild: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0) 70%);

	/* Typografi */
	--loft-typsnitt-rubrik: Georgia, "Times New Roman", serif;
	--loft-typsnitt-brod: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--loft-vikt-normal: 400;
	--loft-vikt-fet: 600;

	/* Flytande typskala: clamp(min, föredragen, max) */
	--loft-storlek-s: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
	--loft-storlek-m: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--loft-storlek-l: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--loft-storlek-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--loft-storlek-xxl: clamp(2.25rem, 1.6rem + 3vw, 4rem);
	--loft-radavstand: 1.6;
	--loft-radavstand-rubrik: 1.15;
	--loft-ordbrytning: anywhere; /* overflow-wrap på body: långa obrutna strängar bryts i stället för att ge sidledsscroll */

	/* Rubriker. De gemensamma värdena gäller alla nivåer, och varje nivå kan få egna. */
	--loft-rubrik-vikt: var(--loft-vikt-normal);
	--loft-rubrik-radavstand: var(--loft-radavstand-rubrik);
	--loft-rubrik-sparrning: normal;
	--loft-rubrik-marginal: 0 0 var(--loft-avstand-s);
	--loft-rubrik-avstavning: auto;  /* hyphens. manual: bryt bara vid mjuka bindestreck (­) */
	--loft-rubrik-radbalans: balance; /* text-wrap. wrap: vanlig radbrytning */
	--loft-h1-typsnitt: var(--loft-typsnitt-rubrik);
	--loft-h1-storlek: var(--loft-storlek-xxl);
	--loft-h1-vikt: var(--loft-rubrik-vikt);
	--loft-h1-radavstand: var(--loft-rubrik-radavstand);
	--loft-h1-sparrning: var(--loft-rubrik-sparrning);
	--loft-h2-typsnitt: var(--loft-typsnitt-rubrik);
	--loft-h2-storlek: var(--loft-storlek-xl);
	--loft-h2-vikt: var(--loft-rubrik-vikt);
	--loft-h2-radavstand: var(--loft-rubrik-radavstand);
	--loft-h2-sparrning: var(--loft-rubrik-sparrning);
	--loft-h3-typsnitt: var(--loft-typsnitt-rubrik);
	--loft-h3-storlek: var(--loft-storlek-l);
	--loft-h3-vikt: var(--loft-rubrik-vikt);
	--loft-h3-radavstand: var(--loft-rubrik-radavstand);
	--loft-h3-sparrning: var(--loft-rubrik-sparrning);
	--loft-h4-typsnitt: var(--loft-typsnitt-rubrik);
	--loft-h4-storlek: var(--loft-storlek-m);
	--loft-h4-vikt: var(--loft-vikt-fet);
	--loft-h4-radavstand: var(--loft-rubrik-radavstand);
	--loft-h4-sparrning: var(--loft-rubrik-sparrning);

	/* Avstånd */
	--loft-avstand-xs: 0.5rem;
	--loft-avstand-s: 1rem;
	--loft-avstand-m: 1.5rem;
	--loft-avstand-l: clamp(2rem, 1.5rem + 2vw, 3rem);
	--loft-avstand-xl: clamp(3rem, 2rem + 4vw, 6rem);
	--loft-sektion: var(--loft-avstand-xl);

	/* Layout */
	--loft-bredd-innehall: 72rem;
	--loft-bredd-text: 42rem;
	--loft-kantmarginal: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
	--loft-hero-hojd: min(80svh, 44rem);
	--loft-logga-hojd: 2.5rem; /* Största höjd för logotypen i sidhuvudet */
	--loft-logga-hojd-sidfot: var(--loft-logga-hojd); /* Största höjd för logotypen i sidfoten */
	--loft-ikon-storlek: 1.5rem; /* Ikoner för sociala medier */

	/* Form */
	--loft-radie: 4px;
	--loft-radie-knapp: var(--loft-radie);
	--loft-radie-falt: var(--loft-radie);  /* Sökfält och formulärfält */
	--loft-radie-yta: var(--loft-radie);   /* Rutor, till exempel inbäddningarnas platshållare */
	--loft-overgang: 0.2s ease;
	--loft-fokus: 2px solid var(--loft-farg-accent);
	--loft-fokus-avstand: 3px;
	--loft-fokus-avstand-falt: 2px;

	/* Knappar */
	--loft-knapp-padding: 0.8em 1.6em;
	--loft-knapp-typsnitt: var(--loft-typsnitt-brod);
	--loft-knapp-storlek: 1em;
	--loft-knapp-vikt: var(--loft-vikt-fet);
	--loft-knapp-radavstand: var(--loft-radavstand);
	--loft-knapp-sparrning: normal;
	--loft-knapp-versaler: none;  /* text-transform, till exempel uppercase */
	--loft-knapp-ram: 1px;        /* Sekundärknappens kant */
	--loft-knapp-minhojd: auto;   /* Till exempel 2.75rem för en större klickyta */
}