/* Jacco van Kooten design tokens — "Melkweg in Nevel-stijl" (Jacco, 2026-10-06):
   de Melkweg als foto achter de hero en de pagina-intro's, met de rust van de
   Nevel-variant: dunne, gecentreerde koppen met één woord in een kleurverloop,
   een witte en een glazen pill-knop, glazen kaarten en een ronde portretfoto
   met gloed. Kleuren uit de Melkweg zelf: nachtzwart, ijsblauw, lavendel en een
   warme gloed uit de kern. Zelfde semantische contract als de andere
   tenants (web/templates/tenants/vbeek/tokens.css); alleen tokens, geen regels. */

/* Sora (SIL Open Font License), zelf gehost zoals Fraunces/IBM Plex in
   blocks.css. Relatief pad: valt onder dezelfde versie in de URL als dit
   bestand (/static/v/<versie>/tokens.css -> /static/v/<versie>/tenant/...). */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('tenant/fonts/sora-latin.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* Palet: nachtzwart #04060F, diepblauw #080C1C, ijsblauw #9EC2FF,
     lavendel #C3B5FF, kerngloed #FFD9C2, sterwit #F4F7FF. */
  --color-bg: #04060F;
  --color-bg-alt: #080C1C;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-border-subtle: rgba(158, 194, 255, 0.14);
  --color-text: #C4CDE2;
  --color-text-muted: #98A3BF;
  --color-heading: #F4F7FF;
  --color-accent: #9EC2FF;
  --color-accent-hover: #C3D6FF;
  --color-on-accent: #0B1024;
  --color-highlight: linear-gradient(90deg, #8FB4FF, #C3B5FF 55%, #FFD9C2);
  --color-border: rgba(255, 255, 255, 0.35);
  --color-footer-bg: #04060F;
  --color-footer-text: #98A3BF;
  --color-error: #FF8F9A;

  --font-heading: 'Sora', system-ui, sans-serif;
  --font-body: 'Sora', system-ui, sans-serif;
  --heading-weight: 300;
  --heading-tracking: -0.02em;

  /* Ronde vormen, glas in plaats van schaduw. */
  --radius: 14px;
  --radius-card: 20px;
  --card-border: 1px solid rgba(255, 255, 255, 0.12);
  --shadow-card: none;
  --card-filter: blur(12px);
  --container-max: 72rem;

  /* Sectiekop: gecentreerd, een kort lijntje in het kleurverloop eronder. */
  --section-head-align: center;
  --section-head-margin: auto;
  --kicker-above: none;
  --kicker-below: block;
  --kicker-width: 3rem;
  --kicker-height: 2px;

  /* Knoppen: pills. De eerste wit, de tweede van glas. */
  --button-radius: 999px;
  --button-case: none;
  --button-tracking: 0;
  --button-size: 0.92rem;
  --button-padding: 0.85rem 1.65rem;
  --button-primary-bg: #F4F7FF;
  --button-primary-text: #0B1024;
  --button-primary-hover-bg: #DCE7FF;
  --button-ghost-bg: rgba(255, 255, 255, 0.05);
  --button-ghost-filter: blur(8px);
  --button-ghost-border: rgba(255, 255, 255, 0.35);

  /* Header: bovenaan de homepage doorzichtig boven de Melkweg, verder donker glas. */
  --header-height: 4.75rem;
  --header-bg: rgba(4, 6, 15, 0.78);
  --header-blur: 14px;
  --header-bg-up: rgba(4, 6, 15, 0.6);
  --header-blur-up: 10px;
  --header-bg-top: rgba(4, 6, 15, 0);
  --header-blur-top: 0px;
  --nav-color: rgba(232, 238, 252, 0.72);
  --nav-color-active: #FFFFFF;
  --menu-sub-bg: rgba(8, 12, 28, 0.94);
  --menu-sub-border: rgba(158, 194, 255, 0.18);
  --menu-sub-radius: 16px;
  --menu-sub-hover-bg: rgba(158, 194, 255, 0.1);

  /* Hero: de Melkweg over de volle hoogte, een donkere waas achter de tekst. */
  --hero-height: min(92vh, 48rem);
  --hero-overlay: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(4, 6, 15, 0.55), rgba(4, 6, 15, 0) 70%), linear-gradient(180deg, rgba(4, 6, 15, 0.45), rgba(4, 6, 15, 0) 28%, rgba(4, 6, 15, 0) 62%, #04060F);
  --hero-text: #FFFFFF;
  --hero-subtext: rgba(232, 238, 252, 0.86);
  --hero-heading-weight: 200;
  --hero-heading-size: clamp(2.4rem, 6.4vw, 5rem);
  --heading-accent-bg: linear-gradient(90deg, #8FB4FF, #C3B5FF 55%, #FFD9C2);
  --heading-accent-color: transparent;
  --heading-accent-weight: 600;
  --hero-features-justify: center;

  /* Pagina-intro (Over mij, Contact, Privacy): een strook Melkweg, gecentreerd. */
  --page-intro-bg: linear-gradient(180deg, rgba(4, 6, 15, 0.15), rgba(4, 6, 15, 0.5) 60%, #04060F), url('tenant/intro.webp') center / cover;
  --page-intro-align: center;
  --page-intro-margin: auto;
  --page-intro-padding: clamp(5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 6vw, 5rem);
  --page-intro-heading-size: clamp(2.2rem, 5vw, 3.6rem);

  /* Over-blok: ronde portretfoto met een blauwe gloed. */
  --media-frame-padding: 0;
  --about-media-ratio: 1;
  --about-media-radius: 50%;
  --about-media-max: 20rem;
  --about-media-border: 1px solid rgba(158, 194, 255, 0.35);
  --about-media-shadow: 0 0 80px rgba(143, 180, 255, 0.25);
  /* Zonder foto: de tekstkolom (max. 768px) in het midden van de pagina. */
  --about-text-margin: auto;

  --cta-bg: linear-gradient(110deg, rgba(143, 180, 255, 0.14), rgba(195, 181, 255, 0.14) 55%, rgba(255, 217, 194, 0.1)), #080C1C;
  --cta-heading: #FFFFFF;
  --input-bg: rgba(4, 6, 15, 0.6);
  --form-columns: 1;
  --testimonial-top: 1px solid rgba(255, 255, 255, 0.12);

  --footer-columns: 2;
  --footer-heading-color: #9EC2FF;
  --footer-heading-case: uppercase;
  --footer-heading-tracking: 0.14em;
  --footer-brand-color: #FFFFFF;
  --footer-link-hover: #FFFFFF;
  --footer-divider: 1px solid rgba(255, 255, 255, 0.07);
}