/* =====================================================================
   BELREUS.NL - design tokens: de enige plek voor kleur, type, ruimte,
   radius en schaduw. Laadt direct na style.css.
   ===================================================================== */
:root {
    /* Kleur: merk */
    --navy: #0b1f42;
    --navy-deep: #071530;
    --navy-2: #12306e;
    --blue: #1a62f2;
    --electric: #3b9dff;
    --deal: #f4570f;
    --deal-hover: #d9480a;
    --gold: #e2bf7a;
    --gold-light: #f6e3b4;
    --bf-red: #e30613;
    --bf-yellow: #ffd21f;
    --bf-black: #0c0a0e;
    --line-blue: #d5e2f6;

    /* Kleur: neutraal */
    --ink: #14233f;
    --muted: #55637b;
    --line: #e4e9f2;
    --tint: #f4f7fc;
    --tint-blue: #eaf2ff;
    --white: #ffffff;

    /* Type: families */
    --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Type: grootte */
    --fs-display: clamp(2.25rem, 1.2rem + 2.9vw, 3.5rem);
    --fs-campaign: clamp(1.875rem, 1.2rem + 2vw, 2.875rem);
    --fs-page: clamp(2rem, 1.65rem + 1.4vw, 2.75rem);
    --fs-section: clamp(1.625rem, 1.4rem + .7vw, 2.125rem);
    --fs-subhead: 1.25rem;
    --fs-price: 1.625rem;
    --fs-lead: 1.0625rem;
    --fs-body: 1rem;
    --fs-product: 1rem;
    --fs-small: .9375rem;
    --fs-meta: .8125rem;

    /* Type: gewicht */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-heading: 700;

    /* Type: regelhoogte en spatiëring */
    --lh-tight: 1.08;
    --lh-heading: 1.18;
    --lh-body: 1.55;
    --ls-display: -.035em;
    --ls-heading: -.022em;
    --ls-caps: .16em;

    /* Ruimte */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 72px;

    /* Radius */
    --radius-xs: 7px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 999px;

    /* Schaduw */
    --shadow: none;
    --shadow-hover: 0 12px 32px rgba(11, 31, 66, .09);
    --shadow-float: 0 24px 60px rgba(11, 31, 66, .14);
    --shadow-deep: 0 28px 64px rgba(7, 21, 48, .34);

    /* Maat */
    --container: 1320px;
    --header-h: 84px;
}