/* porto-verhuur.nl — design tokens (uit het ontwerp)
 *
 * Overgenomen uit handoff/tokens.css. Het lettertype wordt niet hier maar in
 * _main.php geladen, zodat de browser er niet op hoeft te wachten voor de rest
 * van de stijlen binnen is.
 */

:root {
  /* Kleur */
  --color-paper: #F5F5F2;      /* paginagrond */
  --color-white: #FFFFFF;      /* afwisselende secties, kaarten */
  --color-surface: #EBECE8;    /* vlakken */
  --color-surface-2: #ECEDE9;  /* onze kolom in de vergelijkingstabel */
  --color-placeholder: #E6E7E3;
  --color-line: #DEDFDA;       /* 1px scheidingslijnen */
  --color-line-strong: #C9CBC5;/* randen secundaire knop, velden */
  --color-ink: #111311;        /* tekst, sterke lijnen */
  --color-text-2: #3A3D39;     /* broodtekst */
  --color-text-3: #50544F;     /* labels, bijschriften (min. 4.5:1 op papier) */
  --color-muted: #6A6E69;      /* ".nl" in woordmerk, 'nee'-cellen */
  --color-faint: #9A9E98;      /* streepje in de tabel */
  --color-dark: #121413;       /* donkere secties */
  --color-dark-2: #0B0C0B;     /* footer */
  --color-dark-line: #3A3E3B;
  --color-dark-line-2: #242725;/* lijnen in de footer */
  --color-dark-text-2: #C7CAC5;
  --color-dark-text-3: #A3A7A2;
  --color-dark-muted: #8C908A; /* ".nl" en labels op donker */
  --color-disabled: #D4D6D1;   /* uitgeschakelde knop */
  --color-accent: #2F6BE0;     /* app-blauw: primaire knop + spreekknop in merk */
  --color-on-accent: #FFFFFF;

  /* Typografie */
  --font-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-display: clamp(50px, 7vw, 100px);   /* hero H1, lh .94, ls -0.045em, 600 */
  --fs-statement: clamp(34px, 4.5vw, 64px);/* kernzin, lh 1.02, ls -0.035em */
  --fs-h2: clamp(30px, 3.1vw, 44px);       /* sectiekop, lh 1.08, ls -0.03em */
  --fs-h3: clamp(19px, 1.7vw, 24px);       /* kaartkop, 600, ls -0.02em */
  --fs-lead: clamp(17px, 1.5vw, 21px);     /* intro, lh 1.5 */
  --fs-body: 16px;                          /* lh 1.6 */
  --fs-small: 14px;
  --fs-label: 12px;                         /* 500, uppercase, ls .06em */

  /* Layout */
  --container: 1200px;
  --gutter: 24px;              /* 12 kolommen */
  --page-pad: clamp(20px, 8.3vw, 120px);
  --section-pad: clamp(56px, 8.3vw, 120px);
  --header-h: 72px;

  /* Vorm */
  --radius-button: 10px;
  --radius-card: 14px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --tap: 44px;                 /* minimale klikhoogte */
  --shadow-product: 0 40px 60px -30px rgba(17, 19, 17, .45);

  /* Beweging */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-reveal: 700ms;         /* fade + 12px omhoog, alleen bij binnenkomen */
  --dur-hover: 150ms;          /* knop 1px omhoog, kaartrand naar ink */
}

@media (max-width: 767px) {
  :root {
    --header-h: 60px;
    /* Het mobiele ontwerp werkt met een vaste zijmarge van 20px en 56px
     * sectiepadding; de clamp hierboven zou daar 30px van maken. */
    --page-pad: 20px;
    --section-pad: 56px;
  }
}