/* ============================================================
   HouthoofdDigital — Colors & Type
   Brand foundation. Import this file first.
   ============================================================ */

/* Webfont — Geist Sans (Google Fonts)
   Weights: 400, 500, 600, 700, 800, 900
   Geist is a developer-brand geometric sans — tighter proportions
   than Syne, matches the logo letterforms, doesn't read as a
   "design portfolio" trope. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Core palette ────────────────────────────────────────── */
  --paper:        #F8F6F0;   /* Primary background — warm cream */
  --paper-soft:   #EDEAE2;   /* Secondary surface — sand */
  --ink:          #0D0F16;   /* Primary text / dark inverted bg */
  --ink-soft:     #1A1D26;   /* Slightly lifted ink for layered dark */
  --accent:       #E84F2A;   /* Single accent — burnt orange-red */
  --accent-deep:  #C73E1D;   /* Pressed / hover-deeper accent */
  --muted:        #767068;   /* Secondary text on paper */
  --muted-dark:   rgba(248,246,240,0.45); /* Secondary text on ink */

  /* ── Borders & dividers ──────────────────────────────────── */
  --border:       rgba(13,15,22,0.10);
  --border-strong:rgba(13,15,22,0.18);
  --border-dark:  rgba(248,246,240,0.08);

  /* ── Semantic — status badges ────────────────────────────── */
  --badge-live-bg:    #D4EDDA;
  --badge-live-fg:    #155724;
  --badge-private-bg: var(--paper-soft);
  --badge-private-fg: var(--muted);

  /* ── Foreground tokens (for content) ─────────────────────── */
  --fg1: var(--ink);        /* primary text on paper */
  --fg2: var(--muted);      /* secondary text on paper */
  --fg1-on-ink: var(--paper);
  --fg2-on-ink: var(--muted-dark);

  /* ── Type ────────────────────────────────────────────────── */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Sizes — display-led scale, tuned for Geist */
  --fs-hero:     clamp(64px, 13vw, 180px);   /* Hero h1 — massive */
  --fs-display:  clamp(40px, 7vw, 88px);     /* Big statement */
  --fs-h2:       clamp(32px, 5vw, 64px);     /* Section heading */
  --fs-h3:       24px;
  --fs-lead:     clamp(18px, 2vw, 22px);     /* Hero subtitle / lead */
  --fs-body:     16px;
  --fs-small:    15px;
  --fs-meta:     14px;
  --fs-eyebrow:  11px;   /* uppercase section labels */
  --fs-mono:     13px;

  /* Weights — Geist black at 900 */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* Letter-spacing — Geist is tight by default, dial in lightly */
  --tracking-tight:   -0.025em;
  --tracking-normal:  -0.011em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.12em;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  /* ── Spacing — 4px base, but layout breathes ─────────────── */
  --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: 88px;
  --space-10: 120px;

  /* ── Radii — almost-square. Brand reads editorial, not pillowy. */
  --radius-xs: 3px;   /* badges */
  --radius-sm: 4px;   /* cards, problem tiles */
  --radius-md: 8px;
  --radius-pill: 999px;
  --radius-none: 0;

  /* ── Shadows — used sparingly. Most surfaces sit flat. ───── */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(13,15,22,0.06);
  --shadow-md:  0 4px 16px rgba(13,15,22,0.08);
  --shadow-lg:  0 12px 40px rgba(13,15,22,0.10);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --wrap-max:   1240px;
  --wrap-pad:   28px;
}

/* ============================================================
   Semantic element styles — use these classes directly or
   compose into your components.
   ============================================================ */

.hd-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted);
}

.hd-h1, h1.hd {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--ink);
}

.hd-h2, h2.hd {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: 1.12;
  color: var(--ink);
}

.hd-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.hd-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  color: var(--muted);
}

.hd-body, p.hd {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--ink);
}

.hd-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--muted);
}

.hd-num {
  /* The 01 / 02 / 03 numbering used everywhere */
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--accent);
}

.hd-accent-dot {
  /* The orange period that ends a hero phrase: "Software, snel." */
  color: var(--accent);
}

.hd-accent {
  color: var(--accent);
}

.hd-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: color var(--dur-base) var(--ease-out);
}
.hd-link:hover { color: var(--accent); }