/* =========================================================================
   Lions Groningen Pronkjewail — Benefit Design System
   Colors & Type tokens. Use these vars across all artifacts.
   ========================================================================= */

/* Fonts (Google Fonts substitutions — the original PDF appears to use a
   high-contrast didone/garalde serif; Cormorant Garamond + Playfair Display
   are the closest free matches. Inter covers the small-caps utility labels.
   FLAG TO USER: confirm/replace these with the brand's licensed fonts. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,500;1,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* -----------------------------------------------------------------------
     COLOR — Brand primaries
     ----------------------------------------------------------------------- */
  --navy-900: #0E1A3C;       /* deep brand navy — headlines, fill */
  --navy-800: #14223F;       /* core navy — body backgrounds, borders */
  --navy-700: #1E2C52;       /* card stroke / icon disc */
  --navy-500: #2F4275;       /* secondary navy */
  --navy-300: #93A1C2;       /* muted navy */

  --gold-700: #B68A1F;       /* deep gold (logo shadow tone) */
  --gold-600: #D4A82A;       /* primary gold — accents, italic emphasis */
  --gold-500: #E0B739;       /* bright gold — highlights */
  --gold-400: #ECC75A;       /* light gold — flourishes on dark */
  --gold-200: #F4DE9F;       /* pale gold — tints */

  --cream-50:  #FBF8F0;      /* lightest parchment */
  --cream-100: #F5F1E5;      /* page background — parchment cream */
  --cream-200: #EFE9D7;      /* card / inset cream */
  --cream-300: #E3DBC2;      /* divider cream */

  --ink-900: #0E1A3C;        /* primary text on cream = navy */
  --ink-700: #2A345A;        /* secondary text */
  --ink-500: #5C6485;        /* tertiary text */
  --ink-300: #9098B0;        /* disabled / muted */

  --paper-on-navy: #F5F1E5;  /* cream-on-navy text */
  --paper-muted-on-navy: #C9C1A6;

  /* Ukraine accents (used sparingly — flag hearts, hope motif) */
  --ua-blue: #0057B7;
  --ua-yellow: #FFD700;

  /* -----------------------------------------------------------------------
     COLOR — Semantic roles
     ----------------------------------------------------------------------- */
  --bg:            var(--cream-100);
  --bg-elevated:   var(--cream-50);
  --bg-inset:      var(--cream-200);
  --bg-invert:     var(--navy-900);

  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-700);
  --fg-subtle:     var(--ink-500);
  --fg-on-invert:  var(--paper-on-navy);

  --accent:        var(--gold-600);
  --accent-strong: var(--gold-700);
  --accent-hover:  var(--gold-500);

  --border:        rgba(14, 26, 60, 0.18);
  --border-strong: var(--navy-800);
  --border-gold:   var(--gold-600);
  --border-frame:  var(--gold-600); /* the outer page border */

  --focus-ring:    var(--gold-500);

  /* -----------------------------------------------------------------------
     TYPE — Family stacks
     ----------------------------------------------------------------------- */
  --font-display: "Playfair Display", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-serif:   "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-italic:  "Cormorant Garamond", "Playfair Display", Georgia, serif; /* used italic */
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* -----------------------------------------------------------------------
     TYPE — Scale (designed against a 1440px layout, fluid via clamp where
     it makes sense). The PDF style is high-contrast: oversized display
     headlines, generous italic running text, tiny tracked small-caps.
     ----------------------------------------------------------------------- */
  --fs-hero:    clamp(56px, 8vw, 112px);   /* "Uitnodiging" */
  --fs-display: clamp(40px, 4.6vw, 64px);  /* section titles */
  --fs-h1:      clamp(34px, 3.4vw, 48px);  /* "Benefiet diner voor Oekraïne." */
  --fs-h2:      clamp(26px, 2.4vw, 34px);
  --fs-h3:      22px;
  --fs-lead:    20px;                       /* italic running quotes / leads */
  --fs-body:    18px;
  --fs-small:   15px;
  --fs-eyebrow: 13px;                       /* TRACKED SMALL CAPS */
  --fs-meta:    12px;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-loose:   1.65;

  --ls-eyebrow: 0.18em;   /* very wide tracking for small caps labels */
  --ls-display: -0.005em;
  --ls-body:    0;

  /* -----------------------------------------------------------------------
     SPACING / RADII / SHADOW / MOTION
     ----------------------------------------------------------------------- */
  --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:  96px;
  --space-10: 128px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;     /* card / info-box rounding (matches PDF) */
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 1.5px;
  --border-width-frame: 2px;

  --shadow-sm: 0 1px 2px rgba(14, 26, 60, 0.08);
  --shadow-md: 0 6px 18px -8px rgba(14, 26, 60, 0.22);
  --shadow-lg: 0 22px 48px -20px rgba(14, 26, 60, 0.32);
  --shadow-gold: 0 0 0 1px rgba(180, 138, 31, 0.35), 0 12px 28px -16px rgba(180, 138, 31, 0.45);

  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* =========================================================================
   Semantic element styles. These DO NOT auto-apply globally — opt in
   either by including these classes or by using the same selectors in
   a scoped wrapper. (We avoid a global * reset to stay polite.)
   ========================================================================= */

.lk-typography h1, .lk-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0;
}
.lk-typography h2, .lk-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}
.lk-typography h3, .lk-h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--fg);
  margin: 0;
}
.lk-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}
.lk-italic-lead {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.lk-typography p, .lk-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.lk-eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--navy-900);
}
.lk-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy-900);
}
.lk-role {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--fg-muted);
}