/* ==========================================================================
   STER FM — Design tokens (huisstijl)
   --------------------------------------------------------------------------
   Kleuren zijn gemeten uit de aangeleverde one-pager. Gebruik ALLEEN deze
   kleuren (en transparante varianten ervan). Alle componenten lezen alleen
   deze variabelen.
   ========================================================================== */

:root {
  /* ── Huisstijlkleuren ────────────────────────────────────── */
  --c-blue: #028aec;        /* primair blauw: knoppen, iconen, sterren */
  --c-blue-deep: #0056af;   /* diep blauw uit het logo: kleine blauwe tekst, vlakken */
  --c-sky: #5bb9f9;         /* lichtblauw: accenten op donker */
  --c-navy: #061e33;        /* navy: koppen, donkere vlakken, footer */
  --c-ice: #e5f6fe;         /* ijsblauw: icooncirkels, zachte vlakken */
  --c-mist: #e8f4fb;        /* lichtblauwe sectie (contact) */
  --c-white: #ffffff;
  --c-offwhite: #fafcfd;
  --c-grey: #4f5054;        /* lopende tekst */
  --c-logo-grey: #6a6c6d;   /* woordmerk in het logo */

  /* ── Rollen (verwijzen naar de huisstijlkleuren) ─────────── */
  --c-ink: var(--c-navy);
  --c-base: var(--c-white);
  --c-paper: var(--c-white);
  --c-pop: var(--c-blue);
  --c-muted: var(--c-grey);
  --c-muted-light: rgb(255 255 255 / 0.72);
  --c-line: rgb(6 30 51 / 0.1);
  --c-line-light: rgb(255 255 255 / 0.16);
  --c-highlight: rgb(91 185 249 / 0.38); /* markering onder accentwoorden */

  --bg: var(--c-base);
  --fg: var(--c-ink);

  /* Standaard case-kleuren (per case overschreven, altijd uit de huisstijl) */
  --case-accent: var(--c-blue-deep);
  --case-soft: var(--c-ice);
  --case-deep: var(--c-navy);

  /* ── Typografie ──────────────────────────────────────────── */
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --fs-xs: 0.8125rem;
  --fs-s: 0.9375rem;
  --fs-m: 1.0625rem;
  --fs-l: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --fs-h2: clamp(2.5rem, 1.3rem + 4.4vw, 5.75rem);
  --fs-h1: clamp(2.75rem, 0.9rem + 6.2vw, 7.75rem);
  --fs-statement: clamp(1.75rem, 1rem + 3vw, 4rem);

  /* ── Vorm ────────────────────────────────────────────────── */
  --r-xs: 10px;
  --r-s: 14px;
  --r-m: 20px;
  --r-l: clamp(20px, 2.4vw, 32px);
  --r-xl: clamp(26px, 3.6vw, 52px);
  --r-sheet: clamp(28px, 5vw, 72px);

  /* ── Layout ──────────────────────────────────────────────── */
  --pad: clamp(16px, 4vw, 56px);
  --pad-wide: clamp(10px, 1.4vw, 24px);
  --maxw: 1320px;
  --header-h: 84px;
  --gap: clamp(16px, 2.4vw, 36px);

  /* ── Beweging ────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Schaduw (navy-transparant) ──────────────────────────── */
  --shadow-s: 0 8px 24px -12px rgb(6 30 51 / 0.25);
  --shadow-m: 0 30px 60px -30px rgb(6 30 51 / 0.4);
}

@media (max-width: 760px) {
  :root {
    --header-h: 72px;
  }
}