/* ==========================================================================
   Reclameworks · design tokens
   Kleuren, typografie, ruimte en vorm uit het Reclameworks Design System.
   ========================================================================== */

/* Reclameworks palette — 5 brand colours (001–005), sampled from the brand moodboard */
:root{
  /* Base palette */
  --rw-puur-wit:#F6F6F6;      /* 001 Puur wit */
  --rw-warm-wit:#E8E7E2;      /* 002 Warm wit */
  --rw-zacht-grijs:#C3C3C3;   /* 003 Zacht grijs */
  --rw-koolzwart:#262626;     /* 004 Koolzwart */
  --rw-diepblauw:#005AD1;     /* 005 Diepblauw — the RW blue */

  /* Derived steps (interaction only, not brand colours) */
  --rw-blauw-hover:#004BB0;
  --rw-blauw-press:#003F94;
  --rw-blauw-tint:#D6E3F5;
  --rw-koolzwart-hover:#3A3A3A;
  --rw-grijs-line:#A9A9A6;
  --rw-grijs-text:#5C5C5A;
  --rw-ink-teal:#22394A;      /* colour of the ink-cloud imagery */

  /* Semantic: surfaces */
  --surface-page:var(--rw-warm-wit);
  --surface-raised:var(--rw-puur-wit);
  --surface-muted:var(--rw-zacht-grijs);
  --surface-inverse:var(--rw-koolzwart);
  --surface-accent:var(--rw-diepblauw);

  /* Semantic: text */
  --text-strong:var(--rw-koolzwart);
  --text-body:var(--rw-koolzwart);
  --text-muted:var(--rw-grijs-text);
  --text-accent:var(--rw-diepblauw);
  --text-on-inverse:var(--rw-warm-wit);
  --text-on-inverse-muted:var(--rw-zacht-grijs);
  --text-on-accent:var(--rw-puur-wit);

  /* Semantic: lines */
  --border-strong:var(--rw-koolzwart);
  --border-subtle:var(--rw-grijs-line);
  --border-on-inverse:#4A4A4A;
  --focus-ring:var(--rw-diepblauw);

  /* Semantic: status (kept within the palette; blue = info/success, koolzwart = neutral) */
  --status-info:var(--rw-diepblauw);
  --status-error:#C4321F;
  --status-success:var(--rw-diepblauw);
}

:root{
  --font-display:"RW Thin 15","cofo-sans-variable",system-ui,sans-serif;
  --font-sans:"cofo-sans-variable",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"cofo-sans-mono-variable",ui-monospace,"SFMono-Regular",monospace;

  --weight-regular:400;
  --weight-medium:500;

  /* Display scale (RW Thin 15) — lowercase statements, tight leading */
  --display-xxl:clamp(88px,14vw,220px); /* @kind font */
  --display-xl:clamp(64px,9vw,136px); /* @kind font */
  --display-l:clamp(48px,6vw,88px); /* @kind font */
  --display-m:clamp(36px,4.2vw,60px); /* @kind font */
  --display-s:32px;
  --leading-display:0.92;
  --leading-display-multi:1.04;
  --tracking-display:-0.01em;

  /* Text scale (CoFo Sans) */
  --text-lead:22px;      /* Medium — blue intro / subhead */
  --text-l:19px;
  --text-m:16px;         /* body */
  --text-s:14px;
  --text-xs:12px;
  --leading-tight:1.3;
  --leading-body:1.6;

  /* Mono (CoFo Sans Mono) — eyebrows, labels, numbers */
  --mono-eyebrow:11px;
  --tracking-eyebrow:0.42em;
  --mono-label:13px;
  --tracking-label:0.12em;
  --mono-ticker:28px;
  --tracking-ticker:0.08em;

  /* Semantic roles */
  --type-h1:var(--display-xl);
  --type-h2:var(--display-l);
  --type-h3:var(--display-m);
  --type-body:var(--text-m);
}

:root{
  /* Spacing scale */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:176px;

  /* Layout */
  --container-max:1320px;
  --container-pad:clamp(20px,4vw,56px);
  --measure-body:62ch;
  --measure-lead:44ch;
  --section-pad:clamp(64px,9vw,144px);
  --header-h:76px;
}

:root{
  /* Corners: Reclameworks is square. No rounding anywhere. */
  --radius-0:0;
  --radius-none:0;

  /* Diagonal cuts — the logo's parallelogram leans ~34°; UI slants are softer */
  --cut-logo-angle:34deg; /* @kind other */
  --slant-ui:-18deg; /* @kind other */          /* skewX for buttons, tags, chips */
  --cut-section:12%; /* @kind other */          /* diagonal section edge (photo/text split) */
  --cut-corner:22px;          /* notched card corner */

  /* Borders */
  --border-hair:1px;
  --border-ui:1.5px;
  --border-strong-w:2px;
  --rule-dotted:1px dotted var(--rw-grijs-line);

  /* Shadows: flat by default; one lift for floating UI only */
  --shadow-none:none;
  --shadow-float:0 18px 40px -18px rgba(38,38,38,.35);
  --shadow-device:0 40px 80px -30px rgba(38,38,38,.45);

  /* Motion */
  --ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:240ms; /* @kind other */
  --dur-slow:480ms; /* @kind other */
  --dur-ticker:28s; /* @kind other */
}

:root {
  /* Gutter: de buitenmarge van de content, gelijk aan de 1400px container */
  --gut: max(24px, calc((100vw - 1400px) / 2));
}

@media (min-width: 1101px) {
  :root {
    --gut: max(clamp(24px, 6.5vw, 96px), calc((100vw - 1400px) / 2));
  }
}