/* ============================================================
   Mondzorg van Kempen — Design Tokens
   Colors + Typography
   ============================================================ */

/* ---------- Webfonts (Google Fonts substitutes) ----------
   Note: original site type is unidentified; Inter (clean grotesk)
   stands in for the wordmark sans, and Cormorant Garamond
   (refined serif w/ condensed weight) covers display + serif accents.
   FLAG: replace with licensed brand fonts when available.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

:root {
  /* ---------------- BRAND COLORS ---------------- */
  /* Hero blue — sampled from current site hero (slate-blue) */
  --mvk-blue-900: #2f3e57;     /* deep ink blue (logo wordmark) */
  --mvk-blue-700: #4a607f;     /* mid blue, headings */
  --mvk-blue-500: #7c91ad;     /* hero background — primary brand blue */
  --mvk-blue-400: #9aacc3;     /* soft blue, supporting */
  --mvk-blue-300: #c2cdda;     /* faded blue, dividers */
  --mvk-blue-200: #dde4ec;     /* surface tint */
  --mvk-blue-100: #eef2f6;     /* near-white tint */

  /* Neutrals — premium, slightly cool */
  --mvk-ink:       #15181d;    /* near-black for body */
  --mvk-charcoal:  #2a2e36;
  --mvk-graphite:  #4a4f59;
  --mvk-stone:     #7b8089;    /* secondary text */
  --mvk-mist:      #b8bcc4;    /* tertiary / disabled */
  --mvk-fog:       #e3e5e9;    /* hairline / divider */
  --mvk-paper:     #f5f5f3;    /* off-white surface */
  --mvk-bone:      #faf9f6;    /* warm white background */
  --mvk-white:     #ffffff;

  /* Accent — warm gold (used very sparingly for premium feel) */
  --mvk-gold:      #b8a578;
  --mvk-gold-soft: #d4c5a0;

  /* Semantic */
  --mvk-success:   #5a7a64;
  --mvk-warning:   #b8915c;
  --mvk-error:     #8b4a52;

  /* ---------------- SEMANTIC TOKENS ---------------- */
  --bg:            var(--mvk-bone);
  --bg-elevated:   var(--mvk-white);
  --bg-tint:       var(--mvk-paper);
  --bg-blue:       var(--mvk-blue-500);
  --bg-blue-soft:  var(--mvk-blue-100);
  --bg-ink:        var(--mvk-ink);

  --fg:            var(--mvk-ink);
  --fg-muted:      var(--mvk-graphite);
  --fg-subtle:     var(--mvk-stone);
  --fg-faint:      var(--mvk-mist);
  --fg-on-blue:    var(--mvk-white);
  --fg-on-ink:     var(--mvk-bone);

  --border:        var(--mvk-fog);
  --border-strong: var(--mvk-mist);

  /* ---------------- TYPE FAMILIES ---------------- */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:    'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, monospace;

  --font-display:  var(--font-serif);  /* hero headings: refined serif */
  --font-heading:  var(--font-sans);   /* section headings: light sans */
  --font-body:     var(--font-sans);

  /* ---------------- TYPE SCALE ---------------- */
  /* Premium minimal: generous tracking on caps, generous leading */
  --fs-xxl:        clamp(3.5rem, 7vw, 6.5rem);    /* hero display */
  --fs-xl:         clamp(2.5rem, 4.5vw, 4rem);    /* section display */
  --fs-lg:         clamp(1.75rem, 3vw, 2.5rem);   /* h2 */
  --fs-md:         clamp(1.25rem, 2vw, 1.5rem);   /* h3 */
  --fs-base:       1rem;                           /* 16 */
  --fs-sm:         0.875rem;                       /* 14 */
  --fs-xs:         0.75rem;                        /* 12 */
  --fs-eyebrow:    0.6875rem;                      /* 11, used uppercase */

  --lh-tight:      1.05;
  --lh-snug:       1.25;
  --lh-normal:     1.55;
  --lh-relaxed:    1.7;

  --ls-display:    -0.02em;
  --ls-tight:      -0.01em;
  --ls-normal:     0;
  --ls-wide:       0.05em;
  --ls-eyebrow:    0.22em;   /* ALL CAPS labels */
  --ls-logo:       0.18em;   /* wordmark spacing */

  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;

  /* ---------------- SPACING ---------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* ---------------- RADII ---------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------------- SHADOWS (subtle, premium) ---------------- */
  --shadow-xs: 0 1px 2px rgba(20, 24, 30, 0.04);
  --shadow-sm: 0 2px 8px rgba(20, 24, 30, 0.05), 0 1px 2px rgba(20, 24, 30, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 24, 30, 0.06), 0 2px 6px rgba(20, 24, 30, 0.04);
  --shadow-lg: 0 24px 48px rgba(20, 24, 30, 0.10), 0 8px 16px rgba(20, 24, 30, 0.05);
  --shadow-hero: 0 60px 120px rgba(47, 62, 87, 0.18), 0 20px 40px rgba(47, 62, 87, 0.10);

  /* ---------------- MOTION ---------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* signature: slow-then-settle */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      640ms;
  --dur-cinema:    1200ms;

  /* ---------------- LAYOUT ---------------- */
  --container:     1280px;
  --container-narrow: 880px;
  --gutter:        clamp(1.25rem, 4vw, 3rem);
}

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

.t-eyebrow,
[data-t="eyebrow"] {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.t-display,
[data-t="display"] {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--fg);
}

.t-h1,
[data-t="h1"] {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--fg);
}

.t-h2,
[data-t="h2"] {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.t-h3,
[data-t="h3"] {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.t-body,
[data-t="body"] {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.t-body-lg,
[data-t="body-lg"] {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.t-caption,
[data-t="caption"] {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}

.t-italic-note,
[data-t="italic-note"] {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-subtle);
}

.t-wordmark,
[data-t="wordmark"] {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-logo);
  text-transform: uppercase;
  color: var(--mvk-blue-700);
}