/* ============================================================
   SIRIUS VISION — DEMO SITE KIT
   tokens.css  ·  laag 1 + 2 van het designsysteem
   ------------------------------------------------------------
   Templates gebruiken UITSLUITEND de semantische tokens (laag 2).
   Per klant overschrijf je alleen laag 1 in brand.css.
   Nooit een hex of px-radius in de sectie-HTML zetten.
   ============================================================ */

:root{
  /* ---------- LAAG 1 · PRIMITIEVEN (per klant vervangen) ---------- */
  --brand-accent:   #E4002B;   /* huisstijl accent (knoppen, cijfers, lijnen) */
  --brand-accent-ink:#FFFFFF;  /* tekst OP de accentkleur */
  --brand-ink:      #221A1C;   /* donkere merkkleur / donkere secties */
  --brand-paper:    #FFFFFF;   /* lichte secties */
  --brand-muted:    #6B6467;   /* secundaire tekst */

  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --weight-display: 800;       /* zware koppen = Sirius Vision-signatuur */
  --tracking-display: -0.03em;

  --radius-base: 4px;          /* 0-6px = strak/corporate · 16px+ = zacht/consumer */
  --ratio: 1.28;               /* typografische schaal */
  --img-ratio: 4/5;            /* portretbeeld standaard */
  --img-treatment: saturate(1.02) contrast(1.02);
  --overlay-strength: .55;     /* donkerte van de overlay op fotohero's */
  --motion-scale: 1;           /* 0 = alle animatie uit voor deze klant */
  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- LAAG 2 · SEMANTISCH (templates gebruiken alleen dit) ---------- */
  --color-bg:        var(--brand-paper);
  --color-text:      var(--brand-ink);
  --color-muted:     var(--brand-muted);
  --color-accent:    var(--brand-accent);
  --color-on-accent: var(--brand-accent-ink);
  --color-accent-hover: var(--brand-accent-hover, var(--brand-accent));
  /* Tweede huisstijlkleur (signaal-/steunkleur). Niet ingevuld? Dan valt hij
     terug op het accent en verandert er niets. */
  --color-accent-2: var(--brand-accent-2, var(--brand-accent));
  --color-surface:   color-mix(in oklab, var(--brand-ink) 4%, var(--brand-paper));
  --color-border:    color-mix(in oklab, var(--brand-ink) 14%, transparent);
  --color-hairline:  color-mix(in oklab, var(--brand-ink) 8%, transparent);

  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem;
  --space-4:2.5rem; --space-5:4rem; --space-6:6rem;
  --section-y: clamp(4rem, 9vw, 8rem);

  --step--1: clamp(.82rem, .78rem + .2vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --step-3:  clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem);
  --step-4:  clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);

  --radius-sm: calc(var(--radius-base) * .5);
  --radius-md: var(--radius-base);
  --radius-lg: calc(var(--radius-base) * 2);
  --radius-pill: 999px;

  --dur-fast: calc(160ms * var(--motion-scale));
  --dur-base: calc(520ms * var(--motion-scale));
  --dur-slow: calc(900ms * var(--motion-scale));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --reveal-y: calc(28px * var(--motion-scale));
}

/* Donkere secties draaien alleen laag 2 om — nooit laag 3 */
.sec--dark, .theme-dark{
  --color-bg:       var(--brand-ink);
  --color-text:     var(--brand-paper);
  --color-muted:    color-mix(in oklab, var(--brand-paper) 62%, transparent);
  --color-surface:  color-mix(in oklab, var(--brand-paper) 6%, var(--brand-ink));
  --color-border:   color-mix(in oklab, var(--brand-paper) 18%, transparent);
  --color-hairline: color-mix(in oklab, var(--brand-paper) 12%, transparent);
  /* Is de accentkleur van de klant te donker om op een donkere sectie te werken?
     Zet dan --brand-accent-dark (en eventueel --brand-accent-dark-ink) in brand.css.
     Zonder die tokens verandert er niets. */
  --color-accent:    var(--brand-accent-dark, var(--brand-accent));
  --color-on-accent: var(--brand-accent-dark-ink, var(--brand-accent-ink));
  --color-accent-hover: var(--brand-accent-dark-hover, var(--brand-accent-dark, var(--brand-accent)));
  --color-accent-2: var(--brand-accent-2-dark, var(--brand-accent-2, var(--brand-accent-dark, var(--brand-accent))));
}

@media (prefers-reduced-motion: reduce){
  :root{ --motion-scale: 0; }
}