/*
  FINL-01 design system, tokens
  Bron: Final interim brand identity guidelines v1.0 (Ice House Design, september 2026)
  Vertaling naar web: Struon, 19-09-2026. Zie README.md voor de keuzes en open punten.

  Opbouw
  1. Primitieven (merkwaarden, niet direct gebruiken in componenten)
  2. Semantiek per register: dark (leidend, Delft Blue-grond) en light (witte grond)
  3. Typografie, maat, motief
*/

/* 1. Primitieven ------------------------------------------------------- */
:root {
  /* Kernpalet: twee kleuren en wit, op volle sterkte (guideline p. 3). Geen tinten. */
  --fnl-delft:    #131E29;  /* Delft Blue, RGB 19/30/41, CMYK 93/76/54/71 */
  --fnl-charcoal: #3C4142;  /* Charcoal,   RGB 60/65/66, CMYK 9/2/0/74   */
  --fnl-white:    #FFFFFF;
  /* Logokleur: het geleverde artwork is #13284C. De guideline noemt R18/G40/B76 (#12284C),
     een afwijking van een eenheid. Alleen voor het merkteken gebruiken, nooit als vlak. */
  --fnl-marque:   #13284C;

  /* Alpha-varianten van de kernkleuren voor hairlines en secundaire tekst op web.
     Dit zijn geen tinten (geen mengsel met wit) maar dezelfde kleur op lagere dekking;
     ter bevestiging bij Ice House, zie README. */
  --fnl-delft-72: rgb(19 30 41 / 0.72);
  --fnl-delft-16: rgb(19 30 41 / 0.16);
  --fnl-delft-08: rgb(19 30 41 / 0.08);
  --fnl-white-72: rgb(255 255 255 / 0.72);
  --fnl-white-16: rgb(255 255 255 / 0.16);
  --fnl-white-08: rgb(255 255 255 / 0.08);

  /* Typografie: Effra via Adobe Fonts (kit hzb8xkb, zie fonts.css). */
  --font-sans: "effra", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight-light: 300;    /* Effra Light: statements en headers, beschikbaar in Adobe-kit (geverifieerd 22-09). */
  --weight-regular: 400;
  --weight-medium: 500;   /* Effra Medium, beschikbaar in Adobe-kit (geverifieerd 22-09). */
  --weight-bold: 700;

  /* Tracking: headers en statements op 200 duizendsten van een em; body nooit getrackt. */
  --tracking-statement: 0.2em;
  --tracking-header: 0.2em;
  --tracking-label: 0.12em;   /* kleine kapitaallabels zoals MARQUE, COLOUR in de guideline */
  --tracking-body: 0;

  /* Fluid type scale (rem). Statement is de grootste stand: AS PERFORMED. en DUTCH BY DESIGN. */
  --text-statement: clamp(2rem, 1.2rem + 3.6vw, 4.75rem);
  --text-display:   clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  --text-h1:        clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem);
  --text-h2:        clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --text-h3:        1.125rem;
  --text-body:      1rem;
  --text-body-lg:   1.125rem;
  --text-small:     0.875rem;
  --text-label:     0.75rem;

  --leading-statement: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.6;

  /* Maat: 4 px-basis. */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-6: 1.5rem;   --space-8: 2rem;     --space-12: 3rem;    --space-16: 4rem;
  --space-24: 6rem;    --space-32: 8rem;
  --container-max: 90rem;      /* 1440 px */
  --container-text: 40rem;     /* leesbreedte body */
  --gutter: clamp(1rem, 4vw, 3rem);

  /* Vorm: quiet luxury, geen afgeronde hoeken, geen schaduwen. Hairlines van 1 px. */
  --radius: 0;
  --line-width: 1px;

  /* Logo (guideline p. 2): minimum 75 px / 20 mm breed, exclusion zone = de breedte van de a,
     circa 0,18 x de merkbreedte (gemeten op p. 2). Verhoudingen uit het artwork. */
  --logo-min-width: 75px;
  --logo-exclusion: 0.18;         /* factor x logo-breedte */
  --logo-ratio: 1.247;            /* breedte / hoogte, marque zonder SINDS 1989 */
  --logo-sinds-ratio: 1.047;      /* breedte / hoogte, marque met SINDS 1989 */

  /* Stator-motief, gemeten op het vectorbestand van Ice House (Stator_holes_graphic.ai):
     schaalveld: steek 1, rijafstand 0,914 x steek, om en om een halve steek verschoven,
     dot 0,68 x steek. Fijn veld: zeshoekig (rijafstand 0,866), dot 0,65 x steek. */
  --stator-row: 0.914;
  --stator-dot: 0.68;
  --stator-row-fine: 0.866;
  --stator-dot-fine: 0.65;
  --stator-pitch: 48px;           /* schaalstand; fijn veld: 12 tot 16 px */

  /* Beweging: terughoudend. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;
}

/* 2. Semantiek per register ------------------------------------------- */
/* Dark is leidend (besluit 19-09): de hero en het merkregister staan op Delft Blue. */
:root,
[data-register="dark"],
.register-dark {
  color-scheme: dark;
  --surface: var(--fnl-delft);
  --surface-raised: var(--fnl-white-08);
  --ink: var(--fnl-white);
  --ink-muted: var(--fnl-white-72);
  --line: var(--fnl-white-16);
  --line-strong: var(--fnl-white);
  --logo: var(--fnl-white);
  --stator-ink: var(--fnl-white);
  --focus: var(--fnl-white);
}

/* Light: contentregister, witte grond, Delft Blue-tekst, Charcoal secundair. */
[data-register="light"],
.register-light {
  color-scheme: light;
  --surface: var(--fnl-white);
  --surface-raised: var(--fnl-delft-08);
  --ink: var(--fnl-delft);
  --ink-muted: var(--fnl-charcoal);
  --line: var(--fnl-delft-16);
  --line-strong: var(--fnl-delft);
  --logo: var(--fnl-marque);
  --stator-ink: var(--fnl-delft);
  --focus: var(--fnl-delft);
}

/* 3. Basis ------------------------------------------------------------- */
html {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
}
:focus-visible {
  outline: var(--line-width) solid var(--focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}