/* Het design system van Hawking: de vaste waarden van de huisstijl (Jeff, oktober 2026).
   Alleen hier staan kleurcodes, lettertypen en maten. Componenten lezen deze variabelen. */
:root {
  /* Basis */
  --space-950: #0F1824;   /* navy: donkere secties, tekst op licht */
  --space-900: #172436;
  --space-800: #1E3048;
  --astronaut-500: #314C73; /* knop op donker */
  --astronaut-300: #CDD9EA; /* lijnen */
  --astronaut-100: #F4F6FB; /* lichte grond */
  --white: #FFFFFF;
  --sky-700: #0370A1;     /* knop, link en overline op licht */
  --sky-400: #38BDF8;     /* link op donker */

  /* Merkkleuren: tekst erop is altijd navy; geel nooit als tekst op licht */
  --rose: #E76DA6;
  --rose-ink: #D0407F;
  --rose-soft: #FBE3EE;
  --blue: #48A6EC;
  --blue-soft: #E3EEF7;
  --yellow: #F3CD46;
  --yellow-ink: #8A6A00;
  --yellow-soft: #FBF1CC;
  /* Reuzencijfer op een merkkleurvlak: een donkerdere tint van dezelfde kleur */
  --rose-500: #DF5591;
  --berry-600: #2563EB;
  --blue-600: #2E8BD6;   /* donkerdere tint van --blue, voor het grote beeld op een blauw vlak */
  --canary-500: #E7AD0B;

  /* Tekst */
  --ink: var(--space-950);
  --muted: #4A5A72;
  --muted-dark: #A2B9D7;

  /* Typografie */
  --font-display: "Red Hat Display", system-ui, sans-serif; /* koppen, cijfers, citaten: 800 en 900 */
  --font-text: "Red Hat Text", system-ui, sans-serif;       /* lopende tekst, knoppen, navigatie */
  --fs-h1: clamp(36px, 5vw, 56px);
  --fs-h2: clamp(28px, 3.4vw, 38px);
  --fs-h3: 20px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-over: 12px;
  --tracking-over: 0.16em;

  /* Afstanden en vormen */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 72px; --s-7: 96px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-demo: 28px; --r-pill: 999px;
  --wrap: 1120px;
  --shadow: 0 24px 50px rgba(15, 24, 36, 0.18);
  /* De schaduw onder elke widget. */
  --shadow-card: 0 10px 30px rgba(15, 24, 36, 0.18);
}