/* =========================================================================
   CARSHIELD — Design tokens
   Undervognsbehandling · automotive · Off-black & Gul · Saira display
   (variable names kept from the original theme so colours cascade everywhere)
   ========================================================================= */

:root {
	/* Saira — heavy, slightly technical display font for headings (with italic) */
	--font-display: 'Saira', 'Sofia Sans', ui-sans-serif, system-ui, sans-serif;

	/* hazard stripe — shared brand detail (top edges of dark panels) */
	--hazard: repeating-linear-gradient(-45deg, #FFC500 0 16px, #2B2D34 16px 32px);
	/* ---- Brand colours (off-black, never pure #000) ---- */
	--ink:        #16171B;   /* off-black — headings, dark sections, header */
	--ink-2:      #1F2026;   /* lifted off-black */
	--ink-3:      #2B2D34;   /* charcoal surface on dark */
	--off-white:  #F5F5F1;   /* warm light page background */
	--white:      #FFFFFF;

	/* yellow accent (variables keep their old --aqua-* names) */
	--aqua:       #FFC500;   /* primary accent — signal yellow */
	--aqua-700:   #A87E00;   /* deep gold — accent text on light */
	--aqua-300:   #FFD64D;   /* light yellow */
	--aqua-50:    #FFF7D6;   /* yellow wash */

	--slate:      #4B4B4F;   /* body text */
	--slate-2:    #87878C;   /* muted text */
	--slate-on-dark: #BAB9BE;/* body text on dark */

	--line:       #E6E4DD;   /* hairline border */
	--line-2:     #D6D3C9;   /* stronger hairline */
	--line-dark:  rgba(255,255,255,.10);

	/* ---- Semantic ---- */
	--bg:         var(--off-white);
	--surface:    var(--white);
	--text:       #1A1A1C;
	--heading:    var(--ink);
	--accent:     var(--aqua);
	--accent-ink: var(--aqua-700);

	/* ---- Typography ---- */
	--font: "Sofia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--fs-eyebrow: .78rem;
	--fs-small:   .875rem;
	--fs-body:    1.0625rem;
	--fs-lead:    clamp(1.125rem, 1.6vw, 1.3rem);
	--fs-h6:      1.0625rem;
	--fs-h5:      1.3rem;
	--fs-h4:      clamp(1.5rem, 2.2vw, 1.9rem);
	--fs-h3:      clamp(1.85rem, 3vw, 2.6rem);
	--fs-h2:      clamp(2.3rem, 4.4vw, 3.8rem);
	--fs-h1:      clamp(2.9rem, 6.2vw, 5.4rem);

	--lh-tight:   1.05;
	--lh-snug:    1.18;
	--lh-body:    1.62;

	--track-tight: -0.02em;
	--track-eyebrow: 0.16em;

	/* ---- Radius (sharp, modern automotive) ---- */
	--r-xs: 1px;
	--r-sm: 2px;
	--r:    3px;
	--r-lg: 5px;
	--r-xl: 8px;
	--r-pill: 999px;

	/* ---- Spacing scale ---- */
	--sp-1: .375rem;
	--sp-2: .625rem;
	--sp-3: 1rem;
	--sp-4: 1.5rem;
	--sp-5: 2.25rem;
	--sp-6: 3.25rem;
	--sp-7: 4.5rem;
	--sp-8: 6rem;

	/* airy, premium section rhythm */
	--section-y: clamp(4rem, 7vw, 7rem);

	/* ---- Layout ---- */
	--maxw: 1520px;
	--maxw-narrow: 960px;
	--gutter: clamp(1.1rem, 4vw, 3rem);
	--topbar-h: 38px;
	--header-h: 84px;
	--header-h-full: calc(var(--topbar-h) + var(--header-h)); /* sticky topbar + navbar */

	/* ---- Shadows (soft, premium) ---- */
	--shadow-xs: 0 1px 2px rgba(16,24,28,.05);
	--shadow-sm: 0 2px 8px rgba(16,24,28,.06);
	--shadow:    0 8px 24px -8px rgba(16,24,28,.14);
	--shadow-lg: 0 24px 60px -22px rgba(16,24,28,.26);
	--shadow-aqua: 0 14px 34px -12px rgba(255,196,0,.45);

	/* ---- Motion ---- */
	--ease: cubic-bezier(.22,.61,.36,1);
	--ease-out: cubic-bezier(.16,1,.3,1);
	--dur: .55s;
}

/* Compact header on mobile — sticky offsets and anchor scroll follow automatically */
@media (max-width: 980px) {
	:root { --topbar-h: 34px; --header-h: 72px; }
}
@media (max-width: 420px) {
	:root { --header-h: 64px; }
}