/* Pro Marketing 360 — tokens
   Merkkleuren uit het handboek; toonstappen alleen voor oppervlakken (tijdelijke beeldvlakken,
   later de FAQ-tegels). Alles verderop gebruikt alleen deze variabelen. */
:root {
  /* merk */
  --negro: #000000;
  --blanco: #ffffff;
  --amarillo: #f9c56a;

  /* oppervlakken: één toonstap van het vlak eronder */
  --surface-light: #ededed;   /* op wit */
  --surface-dark: #262626;    /* op zwart */

  /* rollen (per hoofdstuk overschreven door .field-*) */
  --field: var(--blanco);
  --field-ink: var(--negro);
  --surface: var(--surface-light);
  --accent: var(--amarillo);
  --accent-ink: var(--negro);
  --focus: var(--negro);

  /* lettertypen (rollen uit het merkhandboek) */
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;            /* títulos */
  --font-statement: "Playfair Display", Georgia, "Times New Roman", serif;  /* subtítulos */
  --font-text: "Poppins", "Helvetica Neue", Arial, sans-serif;              /* cuerpo */

  /* typeschaal: vijf stappen, ver uit elkaar */
  --step-small: 0.875rem;                                   /* 14px  noten, klein drukwerk */
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);   /* 17–19px lopende tekst */
  --step-lead: clamp(1.5rem, 0.9rem + 1.5vw, 2.25rem);        /* 24–36px statements, titels in lijsten */
  --step-head: clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem);      /* 36–72px sectiekoppen */
  --step-display: clamp(2.75rem, 0.6rem + 6.6vw, 8.5rem);   /* 44–136px h1 en hoofdstukkoppen */

  /* ruimte en grid */
  --margin: clamp(1.5rem, 3.4vw, 3rem);       /* 24px telefoon, 48px desktop */
  --gutter: clamp(1rem, 1.6vw, 1.5rem);
  --section: clamp(4.5rem, 10vw, 10rem);      /* 72px telefoon, 144–160px desktop */
  --stack-sm: 1rem;
  --stack-md: clamp(1.5rem, 2.4vw, 2.5rem);   /* 24–40px: kop tot zin */
  --stack-lg: clamp(4rem, 7vw, 7rem);         /* 64–112px: tussen rijen */
  --radius: 0;                                 /* één hoek voor de hele pagina */

  /* knop */
  --button-h: 3.5rem;
}

/* hoofdstukvlakken: elk vlak brengt zijn eigen inkt mee */
.field-blanco   { --field: var(--blanco);   --field-ink: var(--negro); --surface: var(--surface-light); --focus: var(--negro); }
.field-negro    { --field: var(--negro);    --field-ink: var(--blanco); --surface: var(--surface-dark); --focus: var(--amarillo); }
.field-amarillo { --field: var(--amarillo); --field-ink: var(--negro); --surface: var(--blanco); --focus: var(--negro); --accent: var(--negro); --accent-ink: var(--amarillo); }
.field-claro    { --field: var(--surface-light); --field-ink: var(--negro); --surface: var(--blanco); --focus: var(--negro); }

/* método: vijf toonstappen van bijna-zwart naar lichter (de eerste net los van het zwarte vlak), afgeleid uit de merkkleuren (geen nieuwe kleur).
   Witte inkt houdt op de lichtste stap nog ruim 5:1 contrast. */
:root {
  --tint-1: color-mix(in srgb, var(--negro), var(--blanco) 10%);
  --tint-2: color-mix(in srgb, var(--negro), var(--blanco) 18%);
  --tint-3: color-mix(in srgb, var(--negro), var(--blanco) 26%);
  --tint-4: color-mix(in srgb, var(--negro), var(--blanco) 34%);
  --tint-5: color-mix(in srgb, var(--negro), var(--blanco) 42%);
}

/* beweging (fase 4): curves en duren; zie css/motion.css */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);         /* entrances en UI onder 600ms */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);         /* reveals van 800ms en langer, regels uit een masker */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);      /* gordijn voor een beeld */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);        /* langzame schaal op foto's */
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ink: 300ms;                                     /* header neemt de inkt van het vlak over */
  --t-reveal: 800ms;
  --t-open: 1100ms;
  --stagger: 70ms;

  /* knop-hover: contrast omhoog, per vlak */
  --accent-hover: var(--negro);
  --accent-hover-ink: var(--amarillo);
}
.field-blanco, .field-claro { --accent-hover: var(--negro); --accent-hover-ink: var(--amarillo); }
.field-negro    { --accent-hover: var(--blanco); --accent-hover-ink: var(--negro); }
.field-amarillo { --accent-hover: var(--blanco); --accent-hover-ink: var(--negro); }