/* ViralSocials design tokens. Merkkleuren staan alleen hier; pagina's gebruiken de rollen. */

:root {
  /* Merk */
  --vs-oranje: #fe751d;
  --vs-oranje-hover: #ff8a3d;
  --vs-navy: #06002e;
  --vs-wit: #ffffff;

  /* Koele neutrale tinten, laag verzadigd */
  --n-50: #f6f8fb;
  --n-100: #eef1f6;
  --n-200: #dfe4ec;
  --n-300: #c8cfdb;
  --n-400: #9aa3b3;
  --n-500: #6b7587;
  --n-600: #4e5869;
  --n-700: #363f50;
  --n-800: #222a38;
  --n-900: #121826;

  /* Donkere vlakken, koeler dan navy */
  --d-bg: #06002e;
  --d-vlak-1: #0c1036;
  --d-vlak-2: #141a42;
  --d-vlak-3: #1e2550;
  --d-rand: #2c3560;
  --d-rand-sterk: #414b7a;
  --d-staal: #34416e;
  --d-tekst-2: #aeb6c8;
  --d-tekst-3: #8a93a8;

  /* Typografie */
  --font-basis: "VS Jakarta", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-kop-1: clamp(2.625rem, 1.4rem + 5vw, 5.25rem);
  --fs-kop-2: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-kop-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-cijfer: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --fs-intro: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --fs-tekst: 1.0625rem;
  --fs-klein: 0.875rem;

  /* Maten */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-pil: 999px;
  --breedte-tekst: 65ch;
  --breedte-pagina: 72rem;
  --hoek: -7deg; /* de oplopende lijn van het logo */
  --hoek-klein: -2deg; /* voor lange elementen, zodat de lijn tekst niet kruist */
  --duur: 180ms;

  /* Rollen: licht */
  --kleur-achtergrond: var(--vs-wit);
  --kleur-vlak: var(--n-50);
  --kleur-vlak-2: var(--n-100);
  --kleur-rand: var(--n-200);
  --kleur-rand-sterk: var(--n-300);
  --kleur-tekst: var(--vs-navy);
  --kleur-tekst-2: var(--n-600);
  --kleur-accent: var(--vs-oranje);
  --kleur-accent-hover: var(--vs-oranje-hover);
  --kleur-op-accent: var(--vs-navy);
  --kleur-accent-tekst: var(--vs-navy);
  --kleur-focus: var(--vs-navy);
  --band-achtergrond: var(--d-bg);
  --band-vlak: var(--d-vlak-2);
  --schaduw: 0 1px 2px rgb(6 0 46 / 0.06), 0 12px 32px rgb(6 0 46 / 0.08);
  --logo-licht: block;
  --logo-donker: none;

  /* Liquid Glass: licht.
     Op een lichte achtergrond komt doorschijnendheid nauwelijks over. Het glas leunt hier
     daarom op diepte: een dichter vlak, een koele haarlijn als rand en een schaduw in vier
     lagen. De glans blijft, maar alleen bovenaan, waar het licht valt. */
  --glas-vlak: rgb(255 255 255 / 0.72);
  --glas-vlak-sterk: rgb(255 255 255 / 0.92);
  --glas-rand: rgb(6 0 46 / 0.10);
  --glas-glans: rgb(255 255 255 / 0.9);
  --glas-blur: 18px;
  --glas-verzadiging: 1.5;
  --glas-schaduw:
    0 1px 1px rgb(6 0 46 / 0.05),
    0 2px 4px rgb(6 0 46 / 0.05),
    0 8px 16px -6px rgb(6 0 46 / 0.12),
    0 24px 48px -18px rgb(6 0 46 / 0.20);

  /* Podium: waar glas overheen ligt. Oranje gloed mag alleen op licht (wordt perzik) */
  --podium-basis: var(--n-50);
  --stip: var(--n-300);
  --podium-1: rgb(254 117 29 / 0.30);
  --podium-2: var(--n-300);
  --reel-a: linear-gradient(165deg, #ffb27d 0%, #fe751d 100%);
  --reel-b: linear-gradient(165deg, #dfe4ec 0%, #9aa3b3 100%);
  --reel-c: linear-gradient(165deg, #1e2550 0%, #06002e 100%);

  color-scheme: light;
}


/* Licht is de standaardweergave (besloten 16 september). De donkere weergave komt er alleen
   als de bezoeker er zelf om vraagt met de wissel in de navigatie. De weergave van het
   besturingssysteem stuurt hier bewust niets aan, zodat iedereen de site hetzelfde binnenkomt. */
:root[data-thema="donker"] {
  --kleur-achtergrond: var(--d-bg);
  --kleur-vlak: var(--d-vlak-1);
  --kleur-vlak-2: var(--d-vlak-2);
  --kleur-rand: var(--d-rand);
  --kleur-rand-sterk: var(--d-rand-sterk);
  --kleur-tekst: var(--vs-wit);
  --kleur-tekst-2: var(--d-tekst-2);
  --kleur-accent-tekst: var(--vs-oranje);
  --kleur-focus: var(--vs-oranje);
  --band-achtergrond: var(--d-vlak-2);
  --band-vlak: var(--d-vlak-3);
  --schaduw: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.35);
  --logo-licht: none;
  --logo-donker: block;
  --glas-vlak: rgb(30 37 80 / 0.5);
  --glas-vlak-sterk: rgb(20 26 66 / 0.82);
  --glas-rand: rgb(200 215 240 / 0.14);
  --glas-glans: rgb(200 215 240 / 0.38);
  --glas-blur: 24px;
  --glas-verzadiging: 1;
  --glas-schaduw: 0 1px 1px rgb(0 0 0 / 0.3), 0 18px 44px -10px rgb(0 0 0 / 0.6);
  --podium-basis: var(--d-bg);
  --stip: var(--d-rand);
  --podium-1: var(--d-staal);
  --podium-2: var(--d-vlak-3);
  --reel-a: linear-gradient(165deg, #414b7a 0%, #141a42 100%);
  --reel-b: linear-gradient(165deg, #aeb6c8 0%, #4e5869 100%);
  --reel-c: linear-gradient(165deg, #2c3560 0%, #0c1036 100%);
  color-scheme: dark;
}