/* ============================================================
   MedxVoyage Design System — Colors & Type
   Two-color brand: Deep Navy + Champagne Gold, on white.
   ============================================================ */

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

:root {
  /* ---------- Brand Core ---------- */
  --mx-navy:        #1A2456;
  --mx-navy-900:    #11173A;
  --mx-navy-700:    #243066;
  --mx-navy-500:    #3A4685;
  --mx-navy-300:    #8A92B5;
  --mx-navy-100:    #E4E6EF;
  --mx-navy-050:    #F4F5F9;

  --mx-gold:        #C9A84C;
  --mx-gold-700:    #A8892F;
  --mx-gold-500:    #D9BB66;
  --mx-gold-200:    #EFE2B5;
  --mx-gold-050:    #FBF7E8;

  --mx-white:       #FFFFFF;
  --mx-paper:       #FAFAF7;
  --mx-ink:         #0E1330;

  /* ---------- Semantic ---------- */
  --mx-success:     #2F7D63;
  --mx-warning:     #B47A1F;
  --mx-danger:      #A23A3A;
  --mx-info:        #3F5BB7;

  /* ---------- Surfaces & FG roles ---------- */
  --mx-bg:          var(--mx-paper);
  --mx-bg-dark:     var(--mx-navy);
  --mx-surface:     var(--mx-white);
  --mx-surface-2:   var(--mx-navy-050);
  --mx-surface-dark: var(--mx-navy-700);

  --mx-fg:          var(--mx-ink);
  --mx-fg-muted:    #4A527A;
  --mx-fg-subtle:   var(--mx-navy-300);
  --mx-fg-on-dark:  var(--mx-white);
  --mx-fg-on-dark-muted: #B7BCD2;
  --mx-accent:      var(--mx-gold);
  --mx-accent-fg:   var(--mx-navy);

  --mx-border:      #DCDFE9;
  --mx-border-strong: #B5BAD0;
  --mx-border-dark: var(--mx-navy-500);
  --mx-divider:     #ECEEF5;

  /* ---------- Type scale ---------- */
  --mx-font-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
  --mx-font-sans:    'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --mx-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --mx-text-xs:    12px;
  --mx-text-sm:    14px;
  --mx-text-base:  16px;
  --mx-text-md:    18px;
  --mx-text-lg:    20px;
  --mx-text-xl:    24px;
  --mx-text-2xl:   30px;
  --mx-text-3xl:   38px;
  --mx-text-4xl:   48px;
  --mx-text-5xl:   64px;
  --mx-text-6xl:   84px;

  --mx-leading-tight: 1.1;
  --mx-leading-snug:  1.25;
  --mx-leading-normal:1.5;
  --mx-leading-loose: 1.7;

  --mx-tracking-tight:   -0.02em;
  --mx-tracking-normal:   0;
  --mx-tracking-wide:     0.04em;
  --mx-tracking-eyebrow:  0.18em;

  /* ---------- Spacing (4-pt grid) ---------- */
  --mx-space-0:  0;
  --mx-space-1:  4px;
  --mx-space-2:  8px;
  --mx-space-3:  12px;
  --mx-space-4:  16px;
  --mx-space-5:  24px;
  --mx-space-6:  32px;
  --mx-space-7:  48px;
  --mx-space-8:  64px;
  --mx-space-9:  96px;
  --mx-space-10: 128px;

  /* ---------- Radii ---------- */
  --mx-radius-xs: 2px;
  --mx-radius-sm: 4px;
  --mx-radius-md: 8px;
  --mx-radius-lg: 12px;
  --mx-radius-xl: 20px;
  --mx-radius-pill: 999px;

  /* ---------- Borders ---------- */
  --mx-border-w-1: 1px;
  --mx-border-w-2: 2px;
  --mx-border-gold: 2px solid var(--mx-gold);

  /* ---------- Elevation ---------- */
  --mx-shadow-sm:   0 1px 2px rgba(14,19,48,0.06);
  --mx-shadow-md:   0 4px 12px rgba(14,19,48,0.08);
  --mx-shadow-lg:   0 12px 32px rgba(14,19,48,0.12);
  --mx-shadow-xl:   0 24px 60px rgba(14,19,48,0.18);
  --mx-shadow-gold: 0 6px 24px rgba(201,168,76,0.35);
  --mx-shadow-inset:inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---------- Motion ---------- */
  --mx-ease:         cubic-bezier(0.4, 0.0, 0.2, 1);
  --mx-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --mx-dur-fast:     120ms;
  --mx-dur-base:     200ms;
  --mx-dur-slow:     360ms;
}

.mx-display, .mx-h0 {
  font-family: var(--mx-font-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, var(--mx-text-6xl));
  line-height: var(--mx-leading-tight);
  letter-spacing: var(--mx-tracking-tight);
  color: var(--mx-ink);
  margin: 0 0 var(--mx-space-5);
}

.mx-h1 {
  font-family: var(--mx-font-display);
  font-weight: 700;
  font-size: var(--mx-text-4xl);
  line-height: var(--mx-leading-tight);
  letter-spacing: var(--mx-tracking-tight);
  color: var(--mx-ink);
  margin: 0 0 var(--mx-space-5);
}

.mx-h2 {
  font-family: var(--mx-font-display);
  font-weight: 600;
  font-size: var(--mx-text-3xl);
  line-height: var(--mx-leading-snug);
  letter-spacing: -0.01em;
  color: var(--mx-ink);
  margin: 0 0 var(--mx-space-4);
}

.mx-h3 {
  font-family: var(--mx-font-display);
  font-weight: 600;
  font-size: var(--mx-text-2xl);
  line-height: var(--mx-leading-snug);
  color: var(--mx-ink);
  margin: 0 0 var(--mx-space-4);
}

.mx-h4 {
  font-family: var(--mx-font-sans);
  font-weight: 700;
  font-size: var(--mx-text-xl);
  line-height: var(--mx-leading-snug);
  color: var(--mx-ink);
  margin: 0 0 var(--mx-space-3);
}

.mx-eyebrow {
  font-family: var(--mx-font-sans);
  font-weight: 600;
  font-size: var(--mx-text-xs);
  letter-spacing: var(--mx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mx-gold-700);
  margin: 0 0 var(--mx-space-3);
}

.mx-lead {
  font-family: var(--mx-font-sans);
  font-weight: 400;
  font-size: var(--mx-text-lg);
  line-height: var(--mx-leading-normal);
  color: var(--mx-fg-muted);
  margin: 0 0 var(--mx-space-5);
  text-wrap: pretty;
}

.mx-p {
  font-family: var(--mx-font-sans);
  font-weight: 400;
  font-size: var(--mx-text-base);
  line-height: var(--mx-leading-normal);
  color: var(--mx-fg);
  margin: 0 0 var(--mx-space-4);
  text-wrap: pretty;
}

.mx-small {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-sm);
  line-height: var(--mx-leading-normal);
  color: var(--mx-fg-muted);
}

.mx-caption {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-xs);
  line-height: var(--mx-leading-snug);
  color: var(--mx-fg-subtle);
}

.mx-mono {
  font-family: var(--mx-font-mono);
  font-size: var(--mx-text-sm);
  font-feature-settings: "ss01", "calt";
}

.mx-quote {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-style: normal;
  font-size: var(--mx-text-2xl);
  line-height: var(--mx-leading-snug);
  letter-spacing: -0.005em;
  color: var(--mx-ink);
  border-left: 3px solid var(--mx-gold);
  padding-left: var(--mx-space-5);
  margin: 0 0 var(--mx-space-5);
}

.mx-link {
  color: var(--mx-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--mx-gold);
  transition: color var(--mx-dur-base) var(--mx-ease),
              border-color var(--mx-dur-base) var(--mx-ease);
}
.mx-link:hover { color: var(--mx-gold-700); border-color: var(--mx-gold-700); }

.mx-on-dark .mx-h1,
.mx-on-dark .mx-h2,
.mx-on-dark .mx-h3,
.mx-on-dark .mx-h4,
.mx-on-dark .mx-display { color: var(--mx-white); }
.mx-on-dark .mx-p       { color: var(--mx-fg-on-dark); }
.mx-on-dark .mx-lead    { color: var(--mx-fg-on-dark-muted); }
.mx-on-dark .mx-eyebrow { color: var(--mx-gold-500); }
.mx-on-dark .mx-link    { color: var(--mx-gold-500); border-color: var(--mx-gold-500); }

.mx-gold-rule::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--mx-gold);
  margin-top: var(--mx-space-4);
  border-radius: 2px;
}