/*
 * tokens.css — de merkwaarden van TIVO Bouw en Ontwikkeling
 *
 * Alles hieronder is overgenomen uit ~/Claude code/tivo-sparkle-site. Achter elke
 * waarde staat het bronbestand met regelnummer, zodat het na te rekenen is. Er is
 * niets van de live site gescrapet en niets verzonnen.
 *
 * Kleuren staan twee keer: eerst als hex (terugval voor browsers zonder oklch),
 * daarna als de oklch-waarde die de site zelf rendert. Browsers die oklch niet
 * kennen negeren de tweede regel en houden de hex. De hex is door mij uit de
 * oklch omgerekend (CSS Color 4, sRGB) — niet uit het commentaarblok gekopieerd.
 * Waar het brandbook-commentaar bovenaan styles.css (regel 10-15) afwijkt van de
 * gerenderde token, staat de gerenderde token hieronder. Dat is wat de bezoeker
 * werkelijk ziet.
 */

:root {
  /* --- kleur ------------------------------------------------------------ */

  /* styles.css:77 — brandbookcommentaar noemt #0F1D2B, rendert als #0E1B2A */
  --ink: #0e1b2a;
  --ink: oklch(0.22 0.035 252);

  /* styles.css:78 — brandbookcommentaar noemt #2C3E57, rendert als #2A394D */
  --ink-soft: #2a394d;
  --ink-soft: oklch(0.34 0.04 256);

  /* styles.css:79 — brandbookcommentaar noemt #8795AD, rendert als #8694A3.
     LET OP: 3,10:1 op wit. Dat haalt WCAG AA voor gewone tekst (4,5:1) niet.
     Deze token staat hier voor de volledigheid en wordt op deze pagina
     nergens voor tekst gebruikt; stijl.css zet alle tekst op --ink-soft. */
  --mist: #8694a3;
  --mist: oklch(0.66 0.028 252);

  /* styles.css:80 — de token die rendert (#B45E27), niet de #C26D27 uit het
     commentaarblok op regel 14. Nagemeten: 4,59:1 op wit → WCAG AA. */
  --copper: #b45e27;
  --copper: oklch(0.575 0.13 50);

  /* styles.css:82 */
  --surface: #ffffff;
  --surface: oklch(1 0 0);

  /* styles.css:84 — rendert als #E0E5EB */
  --line: #e0e5eb;
  --line: oklch(0.92 0.01 252);

  /* --- typografie -------------------------------------------------------- */

  /* styles.css:69 en styles.css:70 — dezelfde stapels als de site, met de
     Google Fonts-CDN eruit: de woff2's staan naast deze CSS. */
  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* styles.css:155-163 — @layer base, koppen */
  --kop-tracking: -0.02em;

  /* styles.css:150 — body font-feature-settings */
  --tekst-features: "ss01", "cv11";

  /* --- maatvoering ------------------------------------------------------- */

  /* styles.css:182 — .container-tivo: px-5 / sm:px-8 / lg:px-12 */
  --marge-x: 1.25rem; /* px-5  */
  --marge-x-sm: 2rem; /* px-8  */
  --marge-x-lg: 3rem; /* px-12 */

  /* styles.css:235-236 — .rule: h-px w-12 bg-copper */
  --streep-b: 3rem; /* w-12 */
  --streep-h: 1px; /* h-px */

  /* styles.css:74 — --radius: 0.25rem; de knop overschrijft dat met een eigen
     8px, zie hieronder */
  --radius: 0.25rem;

  /* --- knop (ui/button.tsx, variant "default", size "lg") ---------------- */

  /* button.tsx:8  — basis: rounded-[8px], font-medium, ring-2 + ring-offset-2 */
  --knop-radius: 8px;
  --knop-gewicht: 500;
  --knop-ring: 2px;
  --knop-ring-offset: 2px;

  /* button.tsx:28 — size lg: h-14 px-9 text-[0.95rem] tracking-wide */
  --knop-hoogte: 3.5rem; /* h-14 */
  --knop-padding-x: 2.25rem; /* px-9 */
  --knop-tekst: 0.95rem;
  --knop-tracking: 0.025em; /* tracking-wide */

  /* button.tsx:12 — variant default: bg-primary / text-primary-foreground /
     hover:bg-[var(--color-ink-soft)]. --primary is --ink (styles.css:93) en
     --primary-foreground is --surface (styles.css:94). */
  --knop-bg: var(--ink);
  --knop-tekstkleur: var(--surface);
  --knop-bg-hover: var(--ink-soft);

  /* styles.css:105 — --ring: var(--copper); de focusring is dus koper */
  --ring: var(--copper);
}

/*
 * stijl.css — de complete opmaak van de verzenddomeinpagina.
 *
 * Handgeschreven, geen framework, geen build. Alle merkwaarden komen uit
 * tokens.css (dat bestand noemt per waarde de bron in tivo-sparkle-site).
 * Bij het bouwen worden tokens.css en dit bestand achter elkaar geplakt tot
 * één stijl.css in de uitrolmap, zodat de pagina met twee verzoeken klaar is.
 *
 * Mobiel eerst. Geen externe verzoeken: de fonts staan in ./fonts/.
 */

/* --- lettertypen, self-hosted -------------------------------------------- */

/* Manrope 700, latin-subset. Google Fonts levert deze als statisch bestand
   (gecontroleerd: geen fvar-tabel), dus precies gewicht 700. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter, latin-subset. Google Fonts levert Inter uitsluitend nog als variabel
   bestand (gecontroleerd: fvar-tabel aanwezig, as wght 100-900), dus dekt dit
   ene bestand zowel 400 als 500 — echte gewichten, geen synthetisch vet. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- basis ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: var(--tekst-features);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* styles.css:165-168 */
::selection {
  background: var(--copper);
  color: var(--surface);
}

/* styles.css:170-177 — haalt de 300ms tap-vertraging weg */
a {
  touch-action: manipulation;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- kolom ---------------------------------------------------------------- */

.paneel {
  width: 100%;
  max-width: calc(38rem + 2 * var(--marge-x));
  margin-inline: auto;
  padding: 2.5rem var(--marge-x) 3rem;
}

/* --- kop ------------------------------------------------------------------ */

.logo {
  width: 168px;
}

/* styles.css:235-236 — .rule */
.streep {
  width: var(--streep-b);
  height: var(--streep-h);
  margin: 1.75rem 0 1.5rem;
  background: var(--copper);
  border: 0;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4.4vw + 0.75rem, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--kop-tracking);
  color: var(--ink);
  text-wrap: balance;
}

/* styles.css:228-233 — .lede */
.lede {
  margin: 0.875rem 0 0;
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.uitleg {
  margin: 1.125rem 0 0;
  max-width: 34rem;
  text-wrap: pretty;
}

/* --- knop (ui/button.tsx, variant default, size lg) ----------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.75rem;
  height: var(--knop-hoogte);
  padding-inline: var(--knop-padding-x);
  border-radius: var(--knop-radius);
  background: var(--knop-bg);
  color: var(--knop-tekstkleur);
  font-family: var(--font-sans);
  font-size: var(--knop-tekst);
  font-weight: var(--knop-gewicht);
  letter-spacing: var(--knop-tracking);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease;
}

.knop:hover {
  background: var(--knop-bg-hover);
}

/* button.tsx:8 — ring-2 ring-ring ring-offset-2 ring-offset-background:
   eerst 2px in de achtergrondkleur, daarbuiten 2px koper. */
.knop:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--knop-ring-offset) var(--surface),
    0 0 0 calc(var(--knop-ring-offset) + var(--knop-ring)) var(--ring);
}

/* --- contact -------------------------------------------------------------- */

.contact {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.contact-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* styles.css:239-247 — .link-underline. Op de site is dat streepje een
   achtergrondverloop; hier is het een echte text-decoration. Reden: een
   contrastcontrole leest een verloop als een volvlak koperen achtergrond
   achter de hele tekst en meldt dan ink-op-koper (3,78:1) als AA-overtreding.
   Dat is onjuist — het koper beslaat maar één pixel onder de regel — maar het
   is een melding die je niet in een oplevering wilt hebben staan. De echte
   underline geeft hetzelfde beeld, spaart de staarten van letters uit en gaat
   wél mee in hoog-contrastmodus.

   inline-block maakt het aanraakvlak zo hoog als de regelhoogte: 26,4 px in
   plaats van de 19,5 px die een inline-link meet. Daarmee haalt het WCAG 2.2
   SC 2.5.8 (24 x 24 px). De uitzondering voor links binnen een zin geldt hier
   niet: op telefoon staat elk gegeven op een eigen regel. Het beeld verandert
   er niet van — de regel was al 26,4 px hoog. */
.contact-lijst a {
  display: inline-block;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness 200ms ease;
}

.contact-lijst a:hover {
  text-decoration-thickness: 2px;
}

.contact-lijst a:focus-visible {
  outline: var(--knop-ring) solid var(--ring);
  outline-offset: var(--knop-ring-offset);
  border-radius: 2px;
}

.naam {
  font-weight: 500;
  color: var(--ink);
}

/* --- voettekst ------------------------------------------------------------ */

.voet {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.voet p {
  margin: 0;
  max-width: 34rem;
}

.voet p + p {
  margin-top: 0.625rem;
}

/* Zelfde behandeling als de links in het contactblok: het e-mailadres staat
   twee keer op de pagina en hoort er twee keer hetzelfde uit te zien. Zonder
   deze regel valt hij terug op de donkere standaardonderstreping van de
   browser. */
.voet a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness 200ms ease;
}

.voet a:hover {
  text-decoration-thickness: 2px;
}

.voet a:focus-visible {
  outline: var(--knop-ring) solid var(--ring);
  outline-offset: var(--knop-ring-offset);
  border-radius: 2px;
}

/* --- vanaf 640px ---------------------------------------------------------- */

@media (min-width: 640px) {
  .paneel {
    max-width: calc(38rem + 2 * var(--marge-x-sm));
    padding: 4rem var(--marge-x-sm) 4rem;
  }

  .logo {
    width: 200px;
  }

  .contact-lijst {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.75rem;
  }

  .contact-lijst li + li::before {
    content: "\00B7";
    margin-right: 0.75rem;
    color: var(--copper);
  }

  /* Het puntje scheidt de gegevens visueel en heeft geen betekenis om voor te
     lezen. De alternatieve tekst "" haalt het uit de schermlezer. Achter een
     @supports, want een browser die deze notatie niet kent gooit de hele
     regel weg — en dan zou het scheidingsteken ook visueel verdwijnen. */
  @supports (content: "x" / "") {
    .contact-lijst li + li::before {
      content: "\00B7" / "";
    }
  }
}

/* --- vanaf 1024px --------------------------------------------------------- */

@media (min-width: 1024px) {
  .paneel {
    max-width: calc(38rem + 2 * var(--marge-x-lg));
    padding-inline: var(--marge-x-lg);
  }
}

/* --- styles.css:302-309 --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}