/* IQ Brain — Cursor-inspired global brand theme */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Surfaces */
  --mf-page-bg: #f5f5f4;
  --mf-surface: #ffffff;
  --mf-surface-2: #efefee;
  --mf-surface-3: #e5e5e3;
  --mf-gray-bg: #f5f5f4;
  --mf-gray-circle: #efefee;

  /* Ink */
  --mf-ink: #171717;
  --mf-ink-muted: #525252;
  --mf-ink-soft: #737373;

  /* Primary = near-black (Cursor-style CTAs) */
  --mf-brand: #171717;
  --mf-brand-dark: #0a0a0a;
  --mf-brand-light: #404040;
  --mf-brand-muted: #efefee;
  --mf-brand-glow: rgba(23, 23, 23, 0.18);

  /* Cursor-like button hover: dark button lightens on hover */
  --mf-btn-hover-bg: #3b3b3b;
  --mf-btn-hover-border: #3b3b3b;
  --mf-btn-hover-text: #f7f7f4;

  /* Gold accent replaces legacy orange */
  --mf-orange: #a9863b;
  --mf-orange-dark: #8f6f2f;

  /* Soft accent for charts / highlights (not CTA) */
  --mf-accent-soft: #3f3f46;
  --mf-accent-line: rgba(23, 23, 23, 0.1);

  --mf-purple: var(--mf-brand);
  --mf-purple-dark: var(--mf-brand-dark);
  --mf-purple-light: #525252;
  --mf-blue: var(--mf-brand);
  --mf-blue-secondary: var(--mf-brand-dark);
  --mf-blue-light: #737373;
  --mf-blue-bg: var(--mf-brand-muted);
  --mf-blue-bg-2: var(--mf-surface-3);
  --mf-blue-accent: var(--mf-brand);

  --mf-accent: var(--mf-brand);
  --mf-accent-light: var(--mf-brand-light);
  --mf-accent-dark: var(--mf-brand-dark);
  --mf-accent-deep: #0a0a0a;
  --mf-accent-glow: var(--mf-brand-glow);

  --mf-display: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mf-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mf-shadow: 0 1px 2px rgba(23, 23, 23, 0.04), 0 8px 24px rgba(23, 23, 23, 0.04);
  --mf-shadow-lg: 0 12px 40px rgba(23, 23, 23, 0.08);
  --mf-shadow-glow: 0 8px 24px var(--mf-brand-glow);
  --mf-radius: 14px;
  --mf-radius-lg: 18px;
  --mf-radius-xl: 24px;
  --mf-radius-btn: 999px;
}

h1,
h2,
h3,
.mf-title,
.mf-title--hero,
.mf-title--section,
.mf-how-card h3,
.mf-test-card h3,
.mf-feature-col h3,
.mf-science-card h3,
.mf-cat-card h3 {
  font-family: var(--mf-display);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.mf-btn {
  border-radius: var(--mf-radius-btn) !important;
  font-weight: 560;
  letter-spacing: -0.01em;
}

/* Unified CTA height: single-line large buttons match across pages */
.mf-btn--lg,
.mf-quiz .test-result-btn,
.mf-quiz .banner-button.mf-btn--primary {
  min-height: var(--mf-btn-cta-min-h, 3.5rem);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.mf-btn--primary {
  background: var(--mf-brand) !important;
  background-image: none !important;
  border-color: var(--mf-brand) !important;
  color: #fff !important;
  box-shadow: none;
}

.mf-btn--primary:hover {
  background: var(--mf-btn-hover-bg) !important;
  border-color: var(--mf-btn-hover-border) !important;
  color: var(--mf-btn-hover-text) !important;
}

.mf-btn--outline {
  border-color: var(--mf-accent-line) !important;
  color: var(--mf-ink) !important;
  background: transparent !important;
}

.mf-btn--outline:hover {
  background: var(--mf-brand-muted) !important;
  border-color: rgba(23, 23, 23, 0.2) !important;
}

.mf-label-tag::before {
  color: var(--mf-brand);
}

.mf-iq-chart__curve {
  stroke: #a9863b;
}

.mf-iq-chart__dot {
  fill: #a9863b;
  stroke: var(--mf-surface);
}

.mf-progress-bar .progress,
.mf-progress-bar__fill {
  background: linear-gradient(90deg, var(--mf-orange-dark), var(--mf-orange)) !important;
}

/* Icon circles: solid black, white content (no blue gradient) */
.mf-start__icon {
  background: var(--mf-brand) !important;
  color: #fff;
}

.mf-title--section .blue,
.mf-title .blue,
h1 .blue,
h2 .blue,
.blue {
  color: var(--mf-ink) !important;
}