/* Klikr typography — Inter · SF Pro · Clash Display */

:root {
  --font-display: 'Clash Display', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
}

/* Display — heroes, section titles, big numbers */
h1,
h2,
.section-title,
.card-title,
.hero h1,
.cosmic-hero h1,
.stat-num,
.pricing-amount,
.page-hero-card h1,
.cta-box h2,
.landing-instore h2,
.is-hero h1,
.about-page-hero h1,
.about-block h2,
.analytics-greeting h1,
.analytics-panel-title,
.analytics-mock__hero-val,
.funnel-step-val,
.mobile-topbar-title,
#modalTitle,
.pricing-welcome h3,
.no-plan h3,
.onboarding-title {
  font-family: var(--font-display);
}

/* System — nav, labels, buttons, dense UI */
.nav-link,
.nav-cta,
.nav-login,
.nav-logo,
.nav-item,
.sidebar-logo,
.sidebar-section,
.form-label,
.section-label,
.stat-label,
.hero-badge,
.btn-primary,
.btn-secondary,
.btn-pricing,
.btn-form-submit,
.btn-send,
.btn-sm,
.btn-upgrade,
.faq-question,
.pricing-header,
.feature-card h3,
.landing-card h3,
.about-hero-eyebrow,
.about-section-label,
.about-hero-card__eyebrow,
.is-step__eyebrow,
.is-hero__badge,
.toast,
.theme-toggle-sidebar {
  font-family: var(--font-system);
}

/* Body — paragraphs, descriptions, secondary copy */
p,
.section-desc,
.card-subtitle,
.hero p,
.cosmic-hero__subtitle,
.landing-instore__text,
.about-hero-lead,
.about-glass-panel p,
.about-block p,
.banner-text,
.pricing-welcome p,
.no-plan p,
.onboarding-sub,
.analytics-greeting p,
.analytics-panel-sub,
.analytics-hint,
.analytics-empty,
.subscriber-meta,
.notif-preview-msg,
#modalDesc,
footer p {
  font-family: var(--font-body);
}

.font-display { font-family: var(--font-display) !important; }
.font-body { font-family: var(--font-body) !important; }
.font-system { font-family: var(--font-system) !important; }