/* ============================================================
   THEME — overgenomen van harmsen.nl
   ------------------------------------------------------------
   Lettertypes: Ubuntu (body), Lobster Two (display).
   Tekst #444, links #44C, accent rgb(166,177,53) (olijf).

   De variabel-namen (--indigo-*, --pink-*) zijn behouden zodat
   index.html + app.js niet hoeven te wijzigen; de waarden zijn
   geremapt naar de harmsen.nl-palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&family=Lobster+Two:wght@700&display=swap');

:root {
  /* ---------- harmsen.nl-palette ---------- */
  --c-text:   #444;
  --c-link:   #44C;
  --c-accent: rgb(166, 177, 53);          /* primair accent (olijf) */
  --c-accent-dark: rgb(132, 142, 38);
  --c-accent-light: rgb(225, 230, 178);
  --c-accent-tint: rgb(243, 246, 220);

  /* ---------- "indigo" reeks = donker → licht grijs/zwart ---------- */
  --indigo-950: #000;
  --indigo-900: #000;                     /* primary headings/borders */
  --indigo-800: #1A1A1A;
  --indigo-700: #333;
  --indigo-500: #6B6B6B;
  --indigo-300: #C4C4C4;
  --indigo-100: #ECECEC;

  /* ---------- "pink" reeks = accent (olijf-tinten) ---------- */
  --pink-700:  var(--c-accent-dark);
  --pink-600:  var(--c-accent);           /* primair accent */
  --pink-500:  var(--c-accent);
  --pink-300:  var(--c-accent-light);
  --pink-100:  var(--c-accent-tint);

  /* ---------- yellow = blauwe linktone (voor strips/tags) ---------- */
  --yellow-500: #44C;
  --yellow-400: #6E7AE6;
  --yellow-200: #E5E8FA;

  --white:     #FFFFFF;
  --off-white: #FBFBF7;
  --gray-100:  #ECEAE3;
  --gray-300:  #C9C5BB;
  --gray-500:  #7C7A70;
  --gray-700:  #5A5852;
  --gray-900:  var(--c-text);
  --black:     #000;

  /* ---------- Semantic surface tokens ---------- */
  --bg:           var(--white);
  --bg-soft:      var(--off-white);
  --bg-inverse:   var(--indigo-900);
  --fg:           var(--c-text);
  --fg-soft:      var(--gray-700);
  --fg-muted:     var(--gray-500);
  --fg-inverse:   var(--white);
  --accent:       var(--c-accent);
  --accent-fg:    var(--white);
  --highlight:    var(--yellow-500);
  --highlight-fg: var(--white);
  --border:       var(--gray-100);
  --border-strong:var(--indigo-900);

  /* ---------- Type ---------- */
  --font-display: 'Lobster Two', 'Georgia', serif;
  --font-body:    'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Lobster Two', cursive;

  --fs-display-xl: clamp(56px, 10vw, 128px);
  --fs-display-lg: clamp(48px, 8vw, 96px);
  --fs-display-md: clamp(36px, 5.5vw, 64px);
  --fs-h1: 48px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-lg: 19px;
  --fs-md: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --lh-display: 1.05;
  --lh-tight: 1.2;
  --lh-body: 1.55;

  --ls-display: 0;
  --ls-caps: 0.06em;

  /* ---------- Spacing (8pt grid) ---------- */
  --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; --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;
  --r-pill: 999px; --r-circle: 50%;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.16);
  --shadow-pop: 4px 4px 0 var(--c-accent);
  --shadow-pop-pink: 4px 4px 0 var(--c-accent);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.5,1.6,.4,1);
  --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms;
}

/* ============================================================
   Base / element styles
   ============================================================ */

html { color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--black);
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; max-width: 62ch; }

a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: var(--fs-sm); color: var(--fg-muted); }

::selection { background: var(--c-accent); color: var(--white); }

/* ---------- Utility / semantic classes ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-accent);
}

.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display); }
.display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: var(--lh-display); }
.display-md { font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-display); }

.script { font-family: var(--font-script); font-weight: 700; font-style: italic; }

.lede { font-size: var(--fs-lg); line-height: 1.45; color: var(--fg-soft); }
.muted { color: var(--fg-muted); }
.ink { color: var(--black); }
.pink { color: var(--c-accent); }
.yellow-bg { background: var(--yellow-500); color: var(--white); }
.indigo-bg { background: var(--black); color: var(--white); }
.indigo-bg h1, .indigo-bg h2, .indigo-bg h3, .indigo-bg h4 { color: var(--white); }