/*
 * HolySmartphone — Design Tokens (single source of truth).
 *
 * Synced from the Claude Design "HolySmartphone Design System" project.
 * Everything else references these via var(--…); no hardcoded hex/px elsewhere.
 * Keep the token NAMES identical to the design system so its component HTML/CSS
 * can be reused verbatim. (We do NOT use the design system's theme.json — this
 * is a classic, buildless theme; tokens are enqueued as plain CSS.)
 */
:root {
	/* ---------- BRAND CORE ---------- */
	--hs-teal:      #008999;
	/* The old #008999 four percent darker: the lightest teal that carries white
	 * text of any size (4,51:1). Every teal surface with white type uses it, so the
	 * old colour survives where #008999 itself (4,17:1) would fail. Not for teal
	 * text on mint: 3,97:1 there, use --accent-text. */
	--hs-teal-aa:   #008392;
	--hs-teal-700:  #006e7c;
	/* #015261 = de footer- en donkere-knopkleur van de oude site (Elementor-kit
	 * "accent"). Lag al op 1 tint van de oude #00545f; nu exact gelijk. */
	--hs-teal-800:  #015261;
	--hs-teal-900:  #003840;
	--hs-teal-300:  #5fb8c3;
	--hs-teal-200:  #a8d7dc;
	--hs-teal-100:  #dcf0f2;
	--hs-teal-50:   #f0fafb;

	--hs-amber:     #f4ab21;
	--hs-amber-700: #ce890b;
	--hs-amber-800: #a06900;
	--hs-amber-300: #f9c86e;
	--hs-amber-100: #fef0d1;
	--hs-amber-50:  #fffaee;

	/*
	 * Oranje — de tweede merkkleur van de oude site (hero-blok, knop "Naar de
	 * reparaties", inruilband). Gemeten 10-10-2026 op holysmartphone.nl.
	 * De oude site zette er WITTE tekst op: 2,30:1, haalt zelfs de 3:1 voor grote
	 * tekst niet. Hier staat er altijd --fg-1 op (6,66:1), zie --cta-2-fg.
	 */
	--hs-orange:     #ff8d3d;
	--hs-orange-700: #ff6900;   /* hover; --fg-1 erop 5,31:1 */
	--hs-orange-100: #ffe8d8;

	/* Mint — de "secondary" van de oude kit: welkomstblok, productbanden. */
	--hs-mint:       #e5f4ef;

	/* Klarna's own badge pink, for the theme's stand-in "Klarna." badge on the
	 * PDP (inc/pdp-popups.php) until the official logo is uploaded. */
	--klarna-pink:   #ffb3c7;

	--hs-green:     #01af6a;
	--hs-green-700: #008a53;
	--hs-green-800: #00663d;
	--hs-green-100: #daf4e8;
	--hs-green-50:  #f0fbf6;

	/* ---------- NEUTRALS ---------- */
	--hs-ink:       #0f171a;
	/* De tekstkleur van de oude site (#252525, 15,3:1 op wit). */
	--hs-text:      #252525;
	--hs-text-2:    #474747;   /* 9,29:1 op wit */
	--hs-ink-2:     #283439;
	--hs-ink-3:     #526066;
	--hs-ink-4:     #7d8a91;
	--hs-line:      #e0e6e9;
	--hs-line-2:    #eef2f4;
	--hs-bg:        #ffffff;
	--hs-bg-soft:   #f8fafb;
	--hs-bg-cream:  #fcf8f0;

	/* Footer (donkerteal chrome, zoals de oude site): mint tekst 7,78:1 op
	 * --hs-teal-800, hairline een stap lichter dan het vlak. */
	--hs-footer-bg:   var(--hs-teal-800);
	--hs-footer-fg:   var(--hs-mint);
	--hs-footer-muted: #9fd3d9;  /* 5,37:1 op --hs-footer-bg */
	--hs-footer-line: #1d6b78;

	/* ---------- SEMANTIC ---------- */
	--hs-success:    var(--hs-green);
	--hs-success-bg: var(--hs-green-100);
	--hs-warning:    var(--hs-amber);
	--hs-warning-bg: var(--hs-amber-100);
	--hs-danger:     #d64040;
	--hs-danger-bg:  #fce8e8;
	--hs-info:       var(--hs-teal);
	--hs-info-bg:    var(--hs-teal-100);

	/* ---------- ROLE TOKENS (author against these) ---------- */
	--fg-1: var(--hs-text);
	--fg-2: var(--hs-text-2);
	/* Muted text. Was --hs-ink-4 (#7d8a91, 3,55:1 — under AA for the 14px dates
	 * and captions it is used for); #6b6b6b is 5,33:1 on white, 4,70:1 on mint. */
	--fg-3: #6b6b6b;
	--fg-on-brand: #ffffff;

	--bg-1: var(--hs-bg);
	--bg-2: var(--hs-bg-soft);
	--bg-3: var(--hs-bg-cream);

	--border-1: var(--hs-line);
	--border-2: var(--hs-line-2);

	/*
	 * Koppen in teal, zoals de oude site. #008999 haalt 4,16:1 op wit en 3,68:1
	 * op --hs-mint: genoeg voor WCAG "grote tekst" (3:1 vanaf 24px, of 18,66px
	 * vet), niet voor kleine. Daarom alleen h1–h3 (≥24px, 700) in --heading-color;
	 * een component die een kop kleiner zet dan 19px zet hem op --heading-color-sm.
	 */
	--heading-color:    var(--hs-teal);
	--heading-color-sm: var(--hs-teal-700);

	/* Focus ring. #008999 is 4,16:1 on white but only 1,43:1 on teal-700, 2,12:1
	 * on the dark-teal footer and 1,81:1 on orange — under the 3:1 WCAG 1.4.11
	 * and 2.4.7 ask. Coloured surfaces switch the ring colour to one of the two
	 * below (components.css), never the ring itself off. */
	--focus-ring:          var(--hs-teal);
	--focus-ring-on-dark:  #ffffff;        /* 5,96:1 on teal-700, 8,82:1 on teal-800 */
	--focus-ring-on-light: var(--hs-text); /* 6,66:1 on orange, 7,81:1 on amber */

	/* Tweede CTA-kleur (oranje vlak, donkere tekst) — de oude "Naar de reparaties". */
	--cta-2:       var(--hs-orange);
	--cta-2-hover: var(--hs-orange-700);
	--cta-2-fg:    var(--hs-text);

	/*
	 * Two teals on purpose. WCAG AA asks 4.5:1 for text but only 3:1 for
	 * graphics, and the brand teal sits between them: #008999 on white is
	 * 4.16:1. So it stays the accent for anything *drawn* — borders, icon
	 * glyphs, soft fills — and text/solid-fill roles step down to teal-700
	 * (5.97:1). Never author `color: var(--accent)` on a light background.
	 */
	--accent: var(--hs-teal);
	--accent-hover: var(--hs-teal-700);
	--accent-press: var(--hs-teal-800);
	--accent-soft: var(--hs-teal-100);

	/* Teal as TEXT on a light background — 5.97:1 on white, 5.05:1 on --accent-soft. */
	--accent-text: var(--hs-teal-700);

	/* Solid teal *behind* white text (buttons, badges) — the white label needs 4.5:1 too. */
	--accent-fill: var(--hs-teal-aa);
	--accent-fill-hover: var(--hs-teal-800);
	--accent-fill-press: var(--hs-teal-900);

	/*
	 * Producttype-badges: "Refurbished" vs "Nieuw in doos" — het eerste dat een
	 * bezoeker op een kaart scant. Dus vlakke vullingen, geen tinten: een
	 * pastelchip valt weg tegen een witte kaart.
	 *
	 * ⚠️ HIER STAAT EEN BEWUST GEACCEPTEERDE WCAG-AFWIJKING. LEES DIT VOORDAT JE
	 * EEN VAN DEZE VIER WAARDEN AANRAAKT.
	 *
	 * De twee vullingen zijn merkkleuren, door de opdrachtgever vastgelegd op
	 * exact rgb(0,175,106) en rgb(238,118,36). Het label is wit, ook op zijn
	 * verzoek (besluit 22-08-2026, nadat de donkere variant getoond was).
	 *
	 * Wit op deze twee vullingen haalt de AA-eis niet. Gemeten op 22-08-2026 uit
	 * de computed values van een echte badge (PDP + archiefkaart), nagerekend met
	 * de WCAG-relatieveluminantieformule:
	 *   --badge-refurb #00af6a  wit label 2,858:1 · vulling 2,858:1 op wit, 2,733:1 op --bg-2
	 *   --badge-new    #ee7624  wit label 2,896:1 · vulling 2,896:1 op wit, 2,766:1 op --bg-2
	 * WCAG 2.2 AA vraagt 4,5:1 voor tekst van deze grootte (12px/800 is geen
	 * "large text", daar zou 3:1 voor gelden). Beide zitten daar dus onder, en
	 * ook onder de 3:1 van 1.4.11 voor de chip zelf tegen de kaart.
	 *
	 * Dit is geen omissie en geen meetfout: het is een eigenaarsbeslissing die
	 * boven de eerdere, wél conforme stand (#00734a/#b34700 met wit, 5,91:1 en
	 * 5,50:1) is gezet. Niet stil terugdraaien, en er ook niet "contrast is oké"
	 * boven schrijven. Wat de betekenis wél redundant houdt (1.4.1): het woord
	 * staat altijd voluit in de chip, en op het archief staat dezelfde informatie
	 * nog eens in het Type-facet.
	 *
	 * Concreet alternatief als er ooit een toegankelijkheidsklacht komt — de
	 * lichtste vulling die met wit nog 4,5:1 haalt, zelfde tint en verzadiging,
	 * alleen donkerder (uitgerekend 22-08-2026, zie het verslag):
	 *   #00af6a -> #008853 (4,52:1 met wit) — alle kanalen x 0,780, 22,0% donkerder
	 *   #ee7624 -> #bb5c1c (4,51:1 met wit) — alle kanalen x 0,784, 21,6% donkerder
	 * Dat is de kleinste wijziging die de poort dichtzet: dezelfde tint, alleen
	 * donkerder, dus het scheelt zichtbaar weinig aan de merkindruk. Wie liever
	 * iets warmer blijft: #c1570f haalt met wit 4,53:1.
	 *
	 * Vandaar drie voorgrondtokens in plaats van één. Ze staan nu alle drie op
	 * wit, maar apart: de twee typebadges hebben een vulling die is vastgezet
	 * door de opdrachtgever, de sale-chip een die wij bepalen. Zou een van de
	 * twee ooit donkerder of lichter worden, dan verschuift alleen zijn eigen
	 * label mee. Eén gedeeld --badge-fg zou dat onmogelijk maken en sleept ook
	 * .hs-home-pcard__off in sections.css mee.
	 *
	 * De sale-badge is bewust neutraal. De typebadge is het scanpunt; een tweede
	 * chip ernaast mag daar niet met kleur mee concurreren. Voorheen was de
	 * amberen sale-chip juist het felste element op de kaart — precies omgekeerd.
	 * Wit op --hs-ink-2 (#283439) is 12,801:1 — gemeten, ruim binnen AA.
	 */
	--badge-refurb:    #00af6a;
	--badge-refurb-fg: #ffffff;
	--badge-new:       #ee7624;
	--badge-new-fg:    #ffffff;
	--badge-sale:      var(--hs-ink-2);
	--badge-fg:        #ffffff;

	/* ---------- TYPE FAMILIES ---------- */
	/* Poppins (koppen) + Lato (tekst en knoppen): de families die de oude site
	 * daadwerkelijk rendert, gemeten in de computed styles. Zie fonts.css. */
	--font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-sans:    "Lato", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* ---------- TYPE SCALE ---------- */
	--fs-12: 0.75rem;
	--fs-14: 0.875rem;
	--fs-15: 0.9375rem;
	--fs-16: 1rem;
	--fs-18: 1.125rem;
	--fs-20: 1.25rem;
	--fs-24: 1.5rem;
	--fs-28: 1.75rem;
	--fs-32: 2rem;
	--fs-38: 2.375rem;  /* section title on the homepage repair block (old site: 38px) */
	--fs-40: 2.5rem;
	--fs-44: 2.75rem;   /* repair-page hero title */
	--fs-48: 3rem;
	--fs-56: 3.5rem;   /* repair-page hero title (old site) */
	--fs-64: 4rem;

	--lh-tight: 1.05;
	--lh-snug:  1.2;
	--lh-base:  1.5;
	--lh-loose: 1.7;

	/* Poppins is breed van zichzelf; de oude site knijpt koppen niet in. */
	--tracking-tight: -0.01em;
	--tracking-snug:  0;
	--tracking-wide:  0.04em;
	--tracking-body:  0.03em;  /* de 0,5px van de oude site op 16px */

	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-black:    700;   /* de oude site heeft geen 800; Poppins 700 is het zwaarst */

	/* ---------- SPACING (4px base) ---------- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-20: 80px;

	/* Old-site metrics that recur in the chrome (measured at 1900px, 10-10-2026). */
	--lh-copy: 24px;              /* the old site's fixed 24px copy line, 16-20px type */
	--hs-content-inset: 10px;     /* old content column starts 10px in (logo, footer columns) */
	--hs-nav-gap: 36px;           /* between main-menu items */
	--hs-footer-day-col: 132px;   /* weekday column of the opening-hours list */
	--hs-footer-mascot-h: 280px;  /* mascot photo in the Account column */
	--hs-crumbs-fs: 0.9775rem;    /* 15.64px: the old Elementor breadcrumb widget */
	--hs-crumbs-fg: #4d4d4d;      /* its grey, 8,4:1 on white */
	--hs-header-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); /* the old header's drop shadow */
	--hs-cart-icon: 32px;         /* basket in the white bar (was the old site's 40px; smaller since 15-10-2026) */
	--hs-content-gutter-sm: 20px; /* content side margin on phones (old site); the header keeps its tighter --hs-gutter */

	/* ---------- LAYOUT ---------- */
	--hs-content-width: 760px;
	/* 1400px content + the gutters: the old site's Elementor container (x250–1650
	 * at 1900px, measured 10-10-2026). Was 1280. */
	--hs-wide-width: 1448px;
	/* The narrower 1140px column the old homepage uses for the repair cards. */
	--hs-mid-width: 1188px;
	--hs-gutter: 24px;
	--hs-topbar-h: 52px;   /* teal utility strip: search + USPs */
	--hs-header-h: 75px;   /* white bar: logo + nav + cart */
	--hs-hero-min-h: 480px;      /* homepage split hero, as measured on the old site */
	--hs-search-panel-w: 640px;  /* header search row */
	--hs-wizard-w: 880px;        /* RepairPlugin search box on the homepage */
	--hs-logo-h: 67px;     /* old site: 265 x 67, overlapping up into the topbar (see components.css) */
	/* upward shift that optically centres the wordmark in the white bar
	 * (wordmark sits ~0.32 of logo height below the SVG's vertical centre) */
	--hs-logo-shift: calc(var(--hs-logo-h) * -0.32);
	/* left column the logo occupies (logo aspect 3.967 × height + one gap), so
	 * the topbar search aligns above the nav instead of clashing with the cloud */
	--hs-logo-col: calc(var(--hs-logo-h) * 3.967 + var(--sp-8));

	/* ---------- RADII ---------- */
	/* Two radii, used everywhere (client, 23-10-2026: "alle corner radius gelijk,
	 * vooral bij de knoppen"): 8px for everything you press or type in —
	 * buttons, fields, option cards, tabs, chips that are not pills — and 16px
	 * for surfaces — cards, panels, bands, photos, dialogs. Round things stay
	 * round (--r-pill: icon buttons, dots, badges). --r-sm and --r-md are kept as
	 * names so nothing breaks, but they are the control radius now.
	 * A control sitting inside another control (the search button inside the
	 * search field) may go one step smaller, so the corners stay concentric. */
	--r-sm: 8px;
	--r-md: 8px;
	--r-lg: 8px;
	--r-xl: 16px;
	--r-pill: 999px;
	--r-card: 16px;

	/* ---------- COMPONENTSPOREN ----------
	 * Minimumbreedte van één spoor in een auto-fill-raster. Staan hier omdat de
	 * PDP en het archief hetzelfde ritme moeten aanhouden; verhoog je ze, dan
	 * passen er minder kaarten op een rij vóór het raster terugvalt.
	 *
	 * ⚠️ Gebruik in het raster `auto-fill`, niet `auto-fit`. Met auto-fit klappen
	 * lege sporen in, en dan rekt één enkele optie zich uit over de volle breedte
	 * -- gemeten: de MacBook Air met één conditieoptie gaf een kaart van 772px. */
	--hs-option-track: 140px;   /* één optiekaart op de PDP (opslag, kleur, conditie) */
	--hs-trust-track:  200px;   /* één USP-kolom in de trustrij op de PDP */

	/* ---------- GRADIENTS ----------
	 * Er is er geen, en dat is een besluit van 22 aug 2026: de opdrachtgever wil
	 * geen decoratieve gradient-achtergronden. Het token --gradient-brand-soft
	 * stond hier en werd op twee plekken gebruikt (de hero op /verkopen/ en de
	 * begroetingskaart in Mijn account); beide zijn nu een vlakke kleur.
	 *
	 * De vijf gradients die nog in het thema staan zijn geen achtergronden maar
	 * functioneel, en die blijven: het scroll-schaduwpatroon van de prijstabel en
	 * van het archief (die laten zien dat er inhoud naast staat), de scrim onder
	 * een galerijcaption (zonder die scrim haalt witte tekst op een foto het
	 * contrast niet), en de diagonale streep over een niet-leverbare optie en over
	 * een doorgestreepte prijs (dat is informatie, geen sier).
	 *
	 * Voeg hier dus geen nieuw gradient-token toe. Wil je een sectie laten
	 * opvallen, gebruik --bg-2 of --hs-teal-50 als vlakke vulling. */

	/* ---------- ELEVATION ---------- */
	--shadow-1: 0 1px 2px rgba(15, 23, 26, 0.04), 0 1px 1px rgba(15, 23, 26, 0.03);
	--shadow-2: 0 4px 12px rgba(15, 23, 26, 0.06), 0 2px 4px rgba(15, 23, 26, 0.04);
	--shadow-3: 0 12px 32px rgba(15, 23, 26, 0.08), 0 4px 8px rgba(15, 23, 26, 0.05);
	--shadow-card: 0 0 10px -5px rgba(0, 0, 0, 0.25);   /* old site's card shadow */
	--shadow-brand: 0 8px 24px rgba(0, 137, 153, 0.18);

	/* ---------- MOTION ---------- */
	--ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 120ms;
	--dur-base: 200ms;
	--dur-slow: 360ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
	}
}