:root {
  --mk-cream:        #f3eee2;
  --mk-cream-soft:   #ece6d6;
  --mk-cream-deep:   #ddd2b9;
  --mk-bone:         #faf6ec;
  --mk-ink:          #11253c;
  --mk-ink-2:        #0d1d31;
  --mk-ink-3:        #08172a;
  --mk-navy:         #2e5077;
  --mk-navy-deep:    #1f3957;
  --mk-emerald:      #0b6e4f;
  --mk-emerald-deep: #084d37;
  --mk-gold:         #c9a227;
  --mk-gold-warm:    #b08d20;
  --mk-paprika:      #b04d2c;
  --mk-brick:        #ab3428;

  --mk-teal:         #1f8a9a;
  --mk-logo-teal:    #41a59d;
  --mk-berry:        #c44d6a;
  --mk-violet:       #6b4fa3;
  --mk-rule:         rgba(17, 37, 60, 0.12);
  --mk-rule-strong:  rgba(17, 37, 60, 0.22);
  --mk-rule-light:   rgba(243, 238, 226, 0.16);
  --mk-text:         #1d2a3d;
  --mk-text-muted:   #56607a;
  --mk-text-faint:   #8a8e9d;
  --mk-text-on-dark: #faf6ec;
  --mk-text-on-dark-muted: rgba(250, 246, 236, 0.68);
  --mk-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --mk-nav-clearance-top: clamp(7rem, 11vh, 8.25rem);
  --mk-hero-pad-bottom: clamp(1.875rem, 3.75vh, 2.625rem);
}

/* The header is position: absolute, so hero and page-head reserve room for it
   with this token. Below 768px the pill card carries its nav on a second row
   and stands ~132px tall, which the desktop value does not clear. */
@media (max-width: 768px) {
  :root {
    --mk-nav-clearance-top: 9.75rem;
  }
}

:root {
  --public-accent: var(--p1-dusk-blue);
  --public-accent-soft: rgba(46, 80, 119, 0.08);
  --public-accent-hover: rgba(46, 80, 119, 0.14);
  --public-card-bg: #ffffff;
  --public-card-border: rgba(46, 80, 119, 0.12);
  --public-card-radius: 1.25rem;
  --public-card-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  --public-pill-radius: 9999px;
  --public-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --public-text: var(--clr-text-main);
  --public-text-muted: var(--clr-text-muted);
}

.pp-page {
  --pp-accent: var(--public-accent);
  --pp-accent-soft: var(--public-accent-soft);
  --pp-accent-hover: var(--public-accent-hover);
  --pp-card-bg: var(--public-card-bg);
  --pp-card-border: var(--public-card-border);
  --pp-card-radius: var(--public-card-radius);
  --pp-card-shadow: var(--public-card-shadow);
  --pp-pill-radius: var(--public-pill-radius);
  --pp-transition: var(--public-transition);
  --pp-text: var(--public-text);
  --pp-text-muted: var(--public-text-muted);
  --ab-accent: var(--public-accent);
  --ab-accent-soft: var(--public-accent-soft);
  --ab-card-bg: var(--public-card-bg);
  --ab-card-border: var(--public-card-border);
  --ab-card-radius: var(--public-card-radius);
  --ab-card-shadow: var(--public-card-shadow);
  --ab-pill-radius: var(--public-pill-radius);
  --ab-transition: var(--public-transition);
  --ab-text: var(--public-text);
  --ab-text-muted: var(--public-text-muted);
  font-family: 'Outfit', sans-serif;
  color: var(--pp-text);
  scroll-behavior: smooth;
}

.ab-page {
  --ab-accent: var(--public-accent);
  --ab-accent-soft: var(--public-accent-soft);
  --ab-accent-hover: var(--public-accent-hover);
  --ab-card-bg: var(--public-card-bg);
  --ab-card-border: var(--public-card-border);
  --ab-card-radius: var(--public-card-radius);
  --ab-card-shadow: var(--public-card-shadow);
  --ab-pill-radius: var(--public-pill-radius);
  --ab-transition: var(--public-transition);
  --ab-text: var(--public-text);
  --ab-text-muted: var(--public-text-muted);
  font-family: 'Outfit', sans-serif;
  color: var(--ab-text);
  scroll-behavior: smooth;
}