/* ============================================================
   Stadsgenootjes — Design Tokens
   Source: docs/stadsgenootjes-design-ref/colors_and_type.css
   Fonts loaded via Google Fonts in inc/enqueue.php (Caprasimo,
   Caveat, Nunito) — no @font-face blocks here.
   ============================================================ */

:root {
  /* ── BRAND CORE ──────────────────────────────────────────── */
  --sg-cream:        #FBF5EC;
  --sg-cream-soft:   #F4EBD9;
  --sg-paper:        #FFFFFF;

  --sg-ink:          #1B1A17;
  --sg-ink-2:        #3B3833;
  --sg-ink-3:        #6B6660;
  --sg-ink-4:        #B7B0A6;

  /* ── CITY COLORS ─────────────────────────────────────────── */
  --sg-rotterdam:        #009A47;
  --sg-rotterdam-deep:   #006B30;
  --sg-rotterdam-soft:   #D9F0E2;

  --sg-amsterdam:        #E2231A;
  --sg-amsterdam-deep:   #B41A12;
  --sg-amsterdam-soft:   #FBD9D6;

  --sg-denhaag:          #F2C500;
  --sg-denhaag-deep:     #BE9A00;
  --sg-denhaag-soft:     #FCF1B5;

  --sg-utrecht:          #C8102E;
  --sg-utrecht-deep:     #8E0B20;
  --sg-utrecht-soft:     #F8D8DD;

  --sg-eindhoven:        #ED1C24;

  --sg-pastel-pink:      #FBD0DA;
  --sg-pastel-mint:      #C9EFD8;
  --sg-pastel-sky:       #CFE6F4;
  --sg-pastel-butter:    #FCEFC0;
  --sg-pastel-lilac:     #E0D4F0;
  --sg-pastel-peach:     #FBDCC4;

  --sg-baby-pink:        #F4B5C2;
  --sg-baby-blue:        #B6D6E8;

  /* ── SEMANTIC ROLES ──────────────────────────────────────── */
  --sg-accent:           var(--sg-rotterdam);
  --sg-accent-deep:      var(--sg-rotterdam-deep);
  --sg-accent-soft:      var(--sg-rotterdam-soft);
  --sg-accent-contrast:  var(--sg-paper);

  --sg-bg:               var(--sg-cream);
  --sg-bg-elevated:      var(--sg-paper);
  --sg-bg-band:          var(--sg-cream-soft);
  --sg-border:           #E8DFCE;
  --sg-border-strong:    #1B1A17;

  --sg-success:          #2E8B57;
  --sg-warning:          #D98C00;
  --sg-error:            #C0291F;

  /* ── TYPE STACKS ─────────────────────────────────────────── */
  --sg-font-display: "Caprasimo", "Cooper Black", "Georgia", serif;
  --sg-font-script:  "Caveat", "Bradley Hand", "Segoe Script", cursive;
  --sg-font-body:    "Nunito", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* ── TYPE SCALE ──────────────────────────────────────────── */
  --sg-fs-xs:    12px;
  --sg-fs-sm:    14px;
  --sg-fs-base:  17px;
  --sg-fs-lg:    20px;
  --sg-fs-xl:    24px;
  --sg-fs-2xl:   32px;
  --sg-fs-3xl:   44px;
  --sg-fs-4xl:   64px;
  --sg-fs-5xl:   88px;
  --sg-fs-6xl:   120px;

  --sg-lh-tight:  1.05;
  --sg-lh-snug:   1.20;
  --sg-lh-normal: 1.45;
  --sg-lh-loose:  1.7;

  --sg-tracking-tight:  -0.01em;
  --sg-tracking-normal: 0;
  --sg-tracking-wide:   0.04em;
  --sg-tracking-caps:   0.12em;

  /* ── SPACING ─────────────────────────────────────────────── */
  --sg-space-1:  4px;
  --sg-space-2:  8px;
  --sg-space-3:  12px;
  --sg-space-4:  16px;
  --sg-space-5:  24px;
  --sg-space-6:  32px;
  --sg-space-7:  48px;
  --sg-space-8:  64px;
  --sg-space-9:  96px;
  --sg-space-10: 128px;

  /* ── RADII ───────────────────────────────────────────────── */
  --sg-radius-xs:  4px;
  --sg-radius-sm:  8px;
  --sg-radius-md:  14px;
  --sg-radius-lg:  20px;
  --sg-radius-xl:  28px;
  --sg-radius-pill: 999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --sg-shadow-xs: 0 1px 2px rgba(60, 40, 20, 0.06);
  --sg-shadow-sm: 0 2px 8px rgba(60, 40, 20, 0.08);
  --sg-shadow-md: 0 8px 24px rgba(60, 40, 20, 0.10);
  --sg-shadow-lg: 0 20px 48px rgba(60, 40, 20, 0.14);
  --sg-shadow-inset: inset 0 2px 0 rgba(255, 255, 255, 0.6);

  --sg-border-thin:   1px solid var(--sg-border);
  --sg-border-ink:    1.5px solid var(--sg-ink);
  --sg-border-accent: 2px solid var(--sg-accent);

  /* ── MOTION ──────────────────────────────────────────────── */
  --sg-ease:        cubic-bezier(.2, .7, .2, 1);
  --sg-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --sg-dur-fast:    140ms;
  --sg-dur-base:    240ms;
  --sg-dur-slow:    420ms;
}

/* ── CITY THEME SWITCHERS ────────────────────────────────────
   Apply to a section or page root to repaint --sg-accent. */
.theme-rotterdam { --sg-accent: var(--sg-rotterdam);  --sg-accent-deep: var(--sg-rotterdam-deep);  --sg-accent-soft: var(--sg-rotterdam-soft); }
.theme-amsterdam { --sg-accent: var(--sg-amsterdam);  --sg-accent-deep: var(--sg-amsterdam-deep);  --sg-accent-soft: var(--sg-amsterdam-soft); }
.theme-denhaag   { --sg-accent: var(--sg-denhaag);    --sg-accent-deep: var(--sg-denhaag-deep);    --sg-accent-soft: var(--sg-denhaag-soft); --sg-accent-contrast: var(--sg-ink); }
.theme-utrecht   { --sg-accent: var(--sg-utrecht);    --sg-accent-deep: var(--sg-utrecht-deep);    --sg-accent-soft: var(--sg-utrecht-soft); }
.theme-feest     { --sg-accent: var(--sg-pastel-pink);--sg-accent-deep: #D77F94;                   --sg-accent-soft: #FCE7ED; --sg-accent-contrast: var(--sg-ink); }
/* v25-token-fixes — 9 additional city themes */
.theme-eindhoven  { --sg-accent: #ED1C24; --sg-accent-deep: #B01219; --sg-accent-soft: #FBDADB; }
.theme-breda      { --sg-accent: #7A4FB5; --sg-accent-deep: #5C3A8A; --sg-accent-soft: #E8DCFF; }
.theme-delft      { --sg-accent: #0072CE; --sg-accent-deep: #005299; --sg-accent-soft: #D6EAFF; }
.theme-haarlem    { --sg-accent: #D9241B; --sg-accent-deep: #A31913; --sg-accent-soft: #FBDAD9; }
.theme-nijmegen   { --sg-accent: #C81F2D; --sg-accent-deep: #941722; --sg-accent-soft: #F8D8DB; }
.theme-leiden     { --sg-accent: #1F4E8C; --sg-accent-deep: #163866; --sg-accent-soft: #D6E4FF; }
.theme-dordrecht  { --sg-accent: #A91432; --sg-accent-deep: #7D0E24; --sg-accent-soft: #F5D5DC; }
.theme-alkmaar    { --sg-accent: #E2231A; --sg-accent-deep: #A81913; --sg-accent-soft: #FBD9D6; }
.theme-amersfoort { --sg-accent: #1F8A4D; --sg-accent-deep: #166638; --sg-accent-soft: #D6F5E6; }

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */

html { font-size: 100%; }

body, .sg-body {
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-base);
  line-height: var(--sg-lh-normal);
  color: var(--sg-ink);
  background: var(--sg-bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sg-display, h1.sg, .sg-h1 {
  font-family: var(--sg-font-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, var(--sg-fs-5xl));
  line-height: var(--sg-lh-tight);
  letter-spacing: var(--sg-tracking-tight);
  color: var(--sg-ink);
  text-wrap: balance;
  margin: 0;
}

h2.sg, .sg-h2 {
  font-family: var(--sg-font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, var(--sg-fs-3xl));
  line-height: var(--sg-lh-snug);
  letter-spacing: var(--sg-tracking-tight);
  color: var(--sg-ink);
  text-wrap: balance;
  margin: 0;
}

h3.sg, .sg-h3 {
  font-family: var(--sg-font-display);
  font-weight: 400;
  font-size: var(--sg-fs-2xl);
  line-height: var(--sg-lh-snug);
  color: var(--sg-ink);
  margin: 0;
}

h4.sg, .sg-h4 {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: var(--sg-fs-xl);
  line-height: var(--sg-lh-snug);
  letter-spacing: var(--sg-tracking-tight);
  color: var(--sg-ink);
  margin: 0;
}

.sg-eyebrow {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: var(--sg-fs-xs);
  letter-spacing: var(--sg-tracking-caps);
  text-transform: uppercase;
  color: var(--sg-accent-deep);
}

.sg-script {
  font-family: var(--sg-font-script);
  font-weight: 600;
  font-size: var(--sg-fs-3xl);
  line-height: 1.0;
  color: var(--sg-accent);
  letter-spacing: 0;
}

.sg-script-sm {
  font-family: var(--sg-font-script);
  font-weight: 600;
  font-size: var(--sg-fs-xl);
  line-height: 1.0;
  color: var(--sg-accent);
}

p.sg, .sg-p {
  font-family: var(--sg-font-body);
  font-weight: 400;
  font-size: var(--sg-fs-base);
  line-height: var(--sg-lh-normal);
  color: var(--sg-ink-2);
  text-wrap: pretty;
  margin: 0;
}

.sg-lead {
  font-family: var(--sg-font-body);
  font-weight: 500;
  font-size: var(--sg-fs-lg);
  line-height: var(--sg-lh-normal);
  color: var(--sg-ink-2);
  text-wrap: pretty;
}

.sg-caption {
  font-family: var(--sg-font-body);
  font-weight: 600;
  font-size: var(--sg-fs-sm);
  color: var(--sg-ink-3);
}

.sg-mono {
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: var(--sg-fs-sm);
  color: var(--sg-ink-3);
}

.sg-link {
  color: var(--sg-accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--sg-dur-fast) var(--sg-ease);
}
.sg-link:hover { color: var(--sg-ink); }