/* ============================================================
   STADSLABS / URBIS LABS — colors_and_type.css
   Minimum-tokens voor nieuwe ontwerpen en code.
   Voor uitgebreide utility-classes: zie tokens.css
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src:
    url("assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
    url("assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src:
    url("assets/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"),
    url("assets/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
}

:root {
  /* ===== KLEUR — gedeeld primair palet ===== */
  --c-ink: #1b1736; /* Donkerblauw — primair, body text */
  --c-turquoise: #27c4bf; /* Stadslabs accent */
  --c-yellow: #ffd800; /* Urbis Labs BV accent (alleen voor Urbis Labs!) */
  --c-grey: #868686; /* Lichtgrijs — neutraal */
  --c-bg: #ffffff;
  --c-bg-soft: #f6f6f8;

  /* Tints / states */
  --c-ink-05: #f2f1f5;
  --c-ink-10: #e5e3eb;
  --c-turquoise-hover: #1fa8a4;
  --c-turquoise-press: #178785;
  --c-yellow-hover: #e6c200;

  /* Semantic — fg/bg/border */
  --c-fg-1: var(--c-ink);
  --c-fg-2: var(--c-grey);
  --c-fg-on-dark: #ffffff;
  --c-mute: var(--c-grey);
  --c-hairline: var(--c-ink-10);
  --c-success: #1fa86b;
  --c-success-tint: #e5f6ee;
  --c-warning: #b8860b;
  --c-warning-tint: #fff5d6;
  --c-error: #c0392b;
  --c-error-tint: #fbeae7;

  /* ===== TYPE ===== */
  --font-display: "Montserrat", system-ui, sans-serif; /* h1–h5, kickers, buttons */
  --font-body: Arial, Helvetica, system-ui, sans-serif; /* body, labels, inputs — huisstijl */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --t-display: 56px;
  --t-h1: 40px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 20px;
  --t-h5: 18px;
  --t-lead: 18px;
  --t-body: 16px;
  --t-small: 14px;
  --t-caption: 12px;

  --lh-display: 1.05;
  --lh-tight: 1.15;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;

  /* ===== SPACING (4px scale) ===== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ===== RADII ===== */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ===== SHADOWS ===== */
  --sh-1: 0 1px 2px rgba(27, 23, 54, 0.06), 0 1px 1px rgba(27, 23, 54, 0.04);
  --sh-2: 0 4px 12px rgba(27, 23, 54, 0.08), 0 2px 4px rgba(27, 23, 54, 0.04);
  --sh-3: 0 12px 32px rgba(27, 23, 54, 0.12), 0 4px 8px rgba(27, 23, 54, 0.06);
  --sh-focus: 0 0 0 3px rgba(39, 196, 191, 0.35);

  /* ===== MOTION ===== */
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 320ms;
  --ease-std: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ===== SEMANTIC RESETS ===== */
html {
  font-family: var(--font-body);
  color: var(--c-fg-1);
}
body {
  background: var(--c-bg);
  margin: 0;
  line-height: var(--lh-base);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
}
h1 {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: 800;
}
h2 {
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
}
h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
}
h4 {
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
}
h5 {
  font-size: var(--t-h5);
  line-height: var(--lh-tight);
  font-weight: 600;
}

p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--c-fg-1);
}

code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--c-ink-05);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--c-turquoise-hover);
}