/* ============================================================
   Comptela homepage, laag 1 van 4: ontwerptokens.
   In dit bestand staan UITSLUITEND custom properties. Zet er nooit
   een selector in: de andere lagen mogen ervan uitgaan dat dit
   bestand niets rendert en dus veilig als eerste laadt.
   Volgorde van de lagen: 01-tokens, 02-base, 03-components, 04-sections.
   ============================================================ */

:root {
  /* ---- Merkkleuren ---- */
  --berry: #c2185b;
  --bordeaux: #7b1338;
  --bordeaux-deep: #4a0b21;
  --gold: #d9a441;
  /* Goud op een licht vlak haalt geen AA-contrast. Voor tekst dus deze. */
  --gold-ink: #8a6416;

  /* ---- Oppervlakken ---- */
  --surface-canvas: #f6f1e7;
  --surface-panel: #fffdf8;
  --surface-raised: #ffffff;
  --surface-sunken: #efe8da;
  --surface-deep: #4a0b21;
  --surface-deep-2: #3a0819;
  --surface-berry-soft: #fbeaf1;
  --surface-gold-soft: #faf1de;

  /* ---- Inkt ----
     LET OP: ink-faint haalt op géén enkel licht vlak AA, ook niet op
     panel (gemeten ongeveer 3,7 op 1). Gebruik het alleen voor tekst die
     niet gelezen hoeft te worden, en neem overal elders ink-muted. */
  --ink: #2b241c;
  --ink-soft: #4a4137;
  --ink-muted: #6c6152;
  --ink-faint: #8d8172;
  --ink-on-dark: #fffdf8;
  --ink-on-dark-muted: #e8cdd8;
  --ink-on-dark-faint: #c99aac;

  /* ---- Lijnen ---- */
  --line: #e7dcc8;
  --line-strong: #d9c9ab;
  --line-on-dark: rgba(217, 164, 65, 0.28);

  /* ---- Tinten, zodat losse rgba() nergens meer nodig is ---- */
  --berry-tint-08: rgba(194, 24, 91, 0.08);
  --berry-tint-12: rgba(194, 24, 91, 0.12);
  --gold-tint-15: rgba(217, 164, 65, 0.15);
  --gold-tint-22: rgba(217, 164, 65, 0.22);

  --grad-berry: linear-gradient(135deg, var(--berry), var(--bordeaux));
  --grad-deep: linear-gradient(160deg, #4a0b21, #2e0614);

  /* ---- Typeschaal, modulair rond 1.25 ----
     De stap die telt is text-xl (h3): die moet duidelijk boven body
     en duidelijk onder h2 zitten. Daar ging de oude pagina de mist in. */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --text-xl: clamp(1.25rem, 0.8vw + 1.05rem, 1.4375rem);
  --text-2xl: clamp(1.5rem, 1.4vw + 1.15rem, 1.75rem);
  --text-3xl: clamp(1.875rem, 2.6vw + 1.2rem, 2.625rem);
  --text-4xl: clamp(2.5rem, 4.2vw + 1.2rem, 3.75rem);

  --leading-tight: 1.08;
  --leading-snug: 1.18;
  --leading-heading: 1.28;
  --leading-body: 1.65;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.12em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --measure: 62ch;
  --measure-narrow: 46ch;

  /* ---- Ruimte, basis 4px ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ---- Sectieritme ----
     Drie standen, geen vaste 5rem meer voor alles. Nadruk maak je met
     ruimte: section-y-tall is voor de secties die de verkoop dragen. */
  --section-y-compact: clamp(2.5rem, 5vw, 3.5rem);
  --section-y: clamp(4rem, 8vw, 6rem);
  --section-y-tall: clamp(5.5rem, 11vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 2rem);

  /* ---- Breedtes ---- */
  --w-wide: 1200px;
  --w-default: 1140px;
  --w-mid: 1000px;
  --w-narrow: 760px;
  --w-prose: 680px;

  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Elevatie, drie niveaus ----
     De regel: kaarten rusten op shadow-1 met een rand, komen op
     shadow-2 bij hover, en shadow-3 verschijnt hoogstens twee keer op
     de hele pagina (de heromockup en de demoband). Eén schaduw voor
     alles laat een pagina als een sjabloon lezen. */
  --shadow-1: 0 1px 2px rgba(43, 36, 28, 0.05), 0 1px 1px rgba(43, 36, 28, 0.04);
  --shadow-2: 0 4px 12px rgba(43, 36, 28, 0.07), 0 2px 4px rgba(43, 36, 28, 0.05);
  --shadow-3: 0 24px 56px rgba(74, 11, 33, 0.28), 0 8px 16px rgba(74, 11, 33, 0.14);
  --shadow-berry: 0 6px 18px rgba(123, 19, 56, 0.32);
  --shadow-berry-hi: 0 10px 26px rgba(123, 19, 56, 0.42);
  /* De ring vervangt de systeemoutline en moet dus zelf zichtbaar zijn.
     Een doorschijnende berry haalde maar 1,8 op 1 tegen het crèmecanvas.
     Nu twee dekkende ringen: een berry kern en een crème buitenrand, zodat
     de overgang op elk vlak boven 3 op 1 blijft. */
  --ring: 0 0 0 2px var(--surface-panel), 0 0 0 5px var(--berry);
  --ring-on-dark: 0 0 0 2px var(--bordeaux-deep), 0 0 0 5px var(--gold);

  /* ---- Beweging ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
  --dur-reveal: 560ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --reveal-shift: 18px;

  --z-header: 50;
  --z-skip: 100;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}