/* ============================================================
   Quantiv Digital — Colors & Type
   Single source of truth for tokens used across the system.
   Source: reference/quantiv-werkwijze.html + uploads/quantiv-design-system.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLORS · primary (teal) ---------- */
  --q-teal-darkest: #14272b;   /* near-black ink, text on cream */
  --q-teal-deepest: #1f4a52;   /* headings, primary buttons */
  --q-teal-deep:    #2f6770;   /* primary accent */
  --q-teal:         #4c7376;   /* brand primary (memory token) */
  --q-teal-mid:     #448591;   /* hover, icons */
  --q-teal-muted:   #6c7e82;   /* subtle text / muted ink */
  --q-teal-mist:    #ecf1f1;   /* coolest tint, section bg */
  --q-teal-mist-2:  #dde7e8;

  /* ---------- COLORS · secondary (goud) ---------- */
  --q-gold:         #d0bd7c;   /* brand secondary, the logo-dot */
  --q-gold-alt:     #cfbf7c;   /* accents */
  --q-gold-soft:    #e8dfbf;   /* underline / pill backgrounds */
  --q-gold-deep:    #7a6a2a;   /* gold-text on light */

  /* ---------- COLORS · paper / sand ---------- */
  --q-paper:        #faf8f5;   /* page bg, default */
  --q-paper-2:      #f4efe0;   /* section/card sand */
  --q-paper-3:      #f1ece0;
  --q-sand:         #ebe4d0;   /* blokken, kaarten */
  --q-sand-2:       #e8e2d2;

  /* ---------- COLORS · structure ---------- */
  --q-line:         #d9d2c0;   /* hairline borders on cream */
  --q-line-soft:    rgba(20, 39, 43, 0.14);

  /* ---------- COLORS · semantic ---------- */
  --q-bg:           var(--q-paper);
  --q-bg-alt:       var(--q-paper-2);
  --q-bg-cool:      var(--q-teal-mist);
  --q-fg:           var(--q-teal-darkest);
  --q-fg-soft:      #2b4348;
  --q-fg-muted:     var(--q-teal-muted);
  --q-accent:       var(--q-teal-deepest);
  --q-accent-2:     var(--q-gold);
  --q-link:         var(--q-teal-deep);
  --q-border:       var(--q-line);

  /* ---------- TYPE · families ---------- */
  --q-serif:  'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --q-sans:   'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --q-mono:   'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- TYPE · scale (web/landing — NOT slides) ----------
     Spec rule: body 14–16px, headings 20–24px. No oversized hero. */
  --q-text-xs:    12px;
  --q-text-sm:    14px;
  --q-text-base:  16px;
  --q-text-md:    18px;
  --q-text-lg:    20px;
  --q-text-xl:    24px;
  --q-text-2xl:   32px;   /* used sparingly */
  --q-text-3xl:   42px;   /* hero accent only */

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

  /* ---------- RADII ---------- */
  --q-radius-sm:   6px;
  --q-radius-md:   14px;   /* default cards */
  --q-radius-lg:   20px;   /* large cards */
  --q-radius-pill: 999px;

  /* ---------- SHADOW (soft, almost-flat) ---------- */
  --q-shadow-sm:  0 1px 2px rgba(20,39,43,0.05);
  --q-shadow-md:  0 2px 8px -2px rgba(20,39,43,0.08);
  --q-shadow-lg:  0 30px 60px -40px rgba(20,39,43,0.25),
                  0 2px 8px -2px rgba(20,39,43,0.08);
  --q-shadow-teal:0 30px 60px -40px rgba(68,133,145,0.40),
                  0 2px 8px -2px rgba(20,39,43,0.06);
}

/* =========================================================
   SEMANTIC TYPE — call these classes / element styles
   ========================================================= */

body {
  font-family: var(--q-sans);
  color: var(--q-fg);
  background: var(--q-bg);
  font-size: var(--q-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.q-eyebrow {
  font-family: var(--q-mono);
  font-size: var(--q-text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--q-teal-deep);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.q-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--q-teal-deep);
}

.q-h1 {
  font-family: var(--q-sans);
  font-weight: 700;
  font-size: var(--q-text-3xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--q-fg);
  text-wrap: balance;
  margin: 0;
}

.q-h2 {
  font-family: var(--q-sans);
  font-weight: 700;
  font-size: var(--q-text-2xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--q-fg);
  text-wrap: balance;
  margin: 0;
}

.q-h3 {
  font-family: var(--q-sans);
  font-weight: 600;
  font-size: var(--q-text-xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--q-fg);
  margin: 0;
}

.q-lead {
  font-family: var(--q-sans);
  font-size: var(--q-text-lg);
  line-height: 1.45;
  color: var(--q-fg-soft);
  font-weight: 400;
  text-wrap: pretty;
  margin: 0;
}

.q-body {
  font-family: var(--q-sans);
  font-size: var(--q-text-base);
  line-height: 1.6;
  color: var(--q-fg-soft);
  margin: 0;
  text-wrap: pretty;
}

.q-small {
  font-family: var(--q-sans);
  font-size: var(--q-text-sm);
  line-height: 1.5;
  color: var(--q-fg-muted);
  margin: 0;
}

.q-mono {
  font-family: var(--q-mono);
  font-size: var(--q-text-xs);
  letter-spacing: 0.08em;
  color: var(--q-fg-muted);
}

.q-mono-num {
  font-family: var(--q-mono);
  font-weight: 500;
  color: var(--q-teal-deep);
}

.q-serif-em {
  font-family: var(--q-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--q-teal-deep);
}

/* gold underline highlight — sparingly */
.q-underline-gold {
  background-image: linear-gradient(transparent 60%, var(--q-gold-soft) 60%);
  padding: 0 2px;
}