/*
  Sjoworks design tokens
  Extracted from the original Framer export (sjoworks.nl).
  Use these custom properties in every new page so future work stays
  visually consistent with the existing site. See ../../DESIGN.md for the
  full style guide and usage guidance.
*/

:root {
  /* Color — backgrounds */
  --color-bg: #0e0e0e;           /* primary dark background */
  --color-bg-pure: #000000;      /* full-bleed hero / video sections */
  --color-surface: #eeece8;      /* off-white/cream card & panel surfaces */
  --color-surface-alt: #222225;  /* secondary dark surface (raised panels) */

  /* Color — text */
  --color-text: #ffffff;                 /* primary text on dark */
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-on-surface: #0e0e0e;      /* text on light surfaces */

  /* Color — accents */
  --color-accent-mint: #e0f1f2;  /* step numbers / highlighted labels */
  --color-accent-blue: #0099ff;  /* links / interactive highlight */

  /* Color — overlays */
  --color-overlay: rgba(0, 0, 0, 0.2);
  --color-overlay-strong: rgba(34, 34, 34, 0.8);

  /* Typography */
  --font-primary: "Inter Tight", "Inter", system-ui, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 15px;
  --text-lg: 16px;
  /* Large display/hero headlines scale fluidly with viewport width in the
     original site (Framer auto-fit text). Approximate with clamp(): */
  --text-hero: clamp(28px, 3.4vw, 46px);
  --text-h1: clamp(22px, 1.9vw, 28px);
  --text-h2: clamp(17px, 1.4vw, 20px);

  --line-height-tight: 1em;
  --line-height-snug: 1.1em;
  --line-height-normal: 1.2em;
  --letter-spacing-default: 0;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 15px;
  --radius-lg: 23px;
  --radius-pill: 40px;
  --radius-pill-lg: 50px;
  --radius-circle: 50%;

  /* Spacing (common gaps/paddings observed across the site) */
  --space-1: 2px;
  --space-2: 5px;
  --space-3: 10px;
  --space-4: 15px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 70px;

  /* V2 — warme laag. De site blijft donker; deze tonen geven het
     "kennis die je kunt bellen"-gevoel in één lichte sectie per pagina. */
  --color-surface-warm: #f4f1ea;     /* licht vlak, iets warmer dan surface */
  --color-text-on-warm-muted: rgba(14, 14, 14, 0.68);
  --color-line: rgba(255, 255, 255, 0.12);
  --color-line-on-warm: rgba(14, 14, 14, 0.14);
  --space-10: 120px;

  /* Motion */
  --transition-fade: opacity 0.4s ease-out;

  /* Breakpoints (reference only — use in @media rules, not var()) */
  /* mobile:  max-width: 809px   */
  /* tablet:  810px – 1199px     */
  /* desktop: 1440px – 1989px    */
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
}