/* =========================================================================
   MarketBetter — Design Tokens
   Source: mb-frontend (Next.js) + Figma "MarketBetter.fig"
   Fonts: Plus Jakarta Sans (display, via Google), Inter (body, LOCAL — fonts/), JetBrains Mono (code, via Google)
   ========================================================================= */

/* Inter — local @font-face declarations. Uses Inter's optical sizes:
   • 18pt file → small body sizes (default)
   • 24pt file → mid-size UI
   • 28pt file → large display use (H1 / metrics)
   Font-size ranges use `size-adjust`-style opticals via named families,
   so authors can opt in with --mb-font-body-lg / --mb-font-display-inter. */

/* Inter 18pt (body copy, 10–18px) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Inter_18pt-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Inter_18pt-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Inter_18pt-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Inter_18pt-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter_18pt-Light.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Inter_18pt-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Inter_18pt-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Inter_18pt-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Inter_18pt-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Inter_18pt-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Inter_18pt-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Inter_18pt-Black.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Inter_18pt-BlackItalic.ttf') format('truetype'); }

/* Inter Display 24pt — mid-size UI (18–28px) */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter_24pt-Light.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter_24pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter_24pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter_24pt-Bold.ttf') format('truetype'); }

/* Inter Display XL 28pt — hero H1 / metric values (28px+) */
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter_28pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter_28pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display XL'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter_28pt-Bold.ttf') format('truetype'); }

/* Plus Jakarta Sans + JetBrains Mono — still via Google (no local files provided) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -------------------- BRAND / PRIMARY -------------------- */
  /* Electric blue — the primary action color, headline accents.
     #0848E7 is the CTA blue (home Introduce.tsx). #094FFE is the
     "inline accent" used for word-level highlights in headlines.   */
  --mb-blue-50:  #EEF3FF;
  --mb-blue-100: #D6E2FF;
  --mb-blue-200: #A7BDFF;
  --mb-blue-300: #7391FE;
  --mb-blue-400: #3D6AFE;
  --mb-blue-500: #094FFE;  /* inline accent (home headline highlight) */
  --mb-blue-600: #0848E7;  /* primary CTA */
  --mb-blue-700: #0639BA;
  --mb-blue-800: #04216B;  /* deep-section background */
  --mb-blue-900: #021549;

  --mb-primary:        var(--mb-blue-600);
  --mb-primary-hover:  var(--mb-blue-700);
  --mb-primary-fg:     #FFFFFF;
  --mb-accent-link:    var(--mb-blue-500);
  --mb-deep-bg:        var(--mb-blue-800);

  /* -------------------- MINT / SUCCESS -------------------- */
  /* Secondary brand accent. Used for stat bars, "Replace the stack.
     Keep the pipeline." highlight, testimonial markers, positive trend. */
  --mb-mint-100: #E3FBF1;
  --mb-mint-200: #B8F3D8;
  --mb-mint-300: #79EEC1;   /* metric divider on deep-bg card */
  --mb-mint-400: #50D5A2;   /* testimonial accent bar */
  --mb-mint-500: #3EA67E;   /* gradient pair + body success */
  --mb-mint-600: #2B8A65;
  --mb-mint-700: #1F6B4C;

  /* -------------------- SEMANTIC STATUS -------------------- */
  --mb-success:   #10B981;  /* emerald-500 (ModernMetricCard up-trend) */
  --mb-success-fg:#047857;
  --mb-success-bg:#ECFDF5;

  --mb-warn:      #F59E0B;
  --mb-warn-fg:   #B45309;
  --mb-warn-bg:   #FFFBEB;

  --mb-danger:    #EF4444;  /* red-500 (down-trend) */
  --mb-danger-fg: #B91C1C;
  --mb-danger-bg: #FEF2F2;

  --mb-info:      #3B82F6;  /* chart primary */
  --mb-info-bg:   #EFF6FF;

  /* -------------------- NEUTRALS (slate scale) -------------------- */
  /* App surface system — tailwind slate (used throughout ModernDashboard). */
  --mb-slate-50:  #F8FAFC;
  --mb-slate-100: #F1F5F9;
  --mb-slate-200: #E2E8F0;
  --mb-slate-300: #CBD5E1;
  --mb-slate-400: #94A3B8;
  --mb-slate-500: #64748B;
  --mb-slate-600: #475569;
  --mb-slate-700: #334155;
  --mb-slate-800: #1E293B;
  --mb-slate-900: #0F172A;

  /* Marketing surfaces lean slightly warmer (neutral gray-50/100). */
  --mb-gray-50:  #F9FAFB;
  --mb-gray-100: #F3F4F6;
  --mb-gray-200: #E5E7EB;
  --mb-gray-600: #4B5563;
  --mb-gray-700: #374151;
  --mb-gray-800: #1F2937;

  /* -------------------- SEMANTIC SURFACES -------------------- */
  --mb-bg:           #FFFFFF;          /* default page */
  --mb-bg-muted:     var(--mb-slate-50);/* app page (bg-slate-50) */
  --mb-bg-marketing: #FFFFFF;
  --mb-bg-deep:      var(--mb-blue-800);
  --mb-surface:      #FFFFFF;          /* card */
  --mb-surface-alt:  var(--mb-slate-50);
  --mb-overlay:      rgba(15, 23, 42, 0.55);

  /* -------------------- SEMANTIC TEXT -------------------- */
  --mb-fg:         var(--mb-slate-900);   /* primary text */
  --mb-fg-strong:  #000000;               /* headline (home uses pure black) */
  --mb-fg-muted:   var(--mb-slate-600);   /* body secondary */
  --mb-fg-subtle:  var(--mb-slate-400);   /* placeholder, icon tint */
  --mb-fg-inverse: #FFFFFF;
  --mb-fg-link:    var(--mb-blue-600);

  /* -------------------- BORDERS -------------------- */
  --mb-border:         var(--mb-slate-200);
  --mb-border-strong:  var(--mb-slate-300);
  --mb-border-subtle:  var(--mb-slate-100);
  --mb-border-focus:   var(--mb-blue-500);

  /* -------------------- SHADOWS -------------------- */
  /* Pulled from ModernMetricCard shadow-sm / hover:shadow-md. */
  --mb-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --mb-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --mb-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --mb-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --mb-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --mb-shadow-card: var(--mb-shadow-sm);
  --mb-shadow-card-hover: var(--mb-shadow-md);
  --mb-shadow-cta: 0 10px 20px -8px rgba(8, 72, 231, 0.45);

  /* -------------------- RADII -------------------- */
  --mb-radius-sm:   6px;
  --mb-radius-md:   8px;    /* input (rounded-lg) */
  --mb-radius-lg:   12px;   /* button (rounded-xl) */
  --mb-radius-xl:   16px;   /* card (rounded-2xl) */
  --mb-radius-2xl:  20px;   /* hero/deep sections (rounded-[20px]) */
  --mb-radius-pill: 9999px;

  /* -------------------- SPACING -------------------- */
  --mb-space-1:  4px;
  --mb-space-2:  8px;
  --mb-space-3:  12px;
  --mb-space-4:  16px;
  --mb-space-5:  20px;
  --mb-space-6:  24px;
  --mb-space-8:  32px;
  --mb-space-10: 40px;
  --mb-space-12: 48px;
  --mb-space-16: 64px;
  --mb-space-20: 80px;
  --mb-space-24: 96px;

  /* -------------------- TYPOGRAPHY -------------------- */
  /* Marketing leans Plus Jakarta Sans (headings, hero). App uses Inter. */
  --mb-font-display: 'Plus Jakarta Sans', 'Helvetica', 'Arial', sans-serif;
  --mb-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mb-font-body-lg: 'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;   /* optical 24pt — use for 18–28px UI */
  --mb-font-body-xl: 'Inter Display XL', 'Inter Display', 'Inter', system-ui, sans-serif; /* optical 28pt — use for hero / metric values */
  --mb-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (used by semantic aliases below). */
  --mb-text-xs:   12px;
  --mb-text-sm:   14px;
  --mb-text-base: 16px;
  --mb-text-md:   18px;
  --mb-text-lg:   20px;
  --mb-text-xl:   24px;
  --mb-text-2xl:  30px;
  --mb-text-3xl:  36px;
  --mb-text-4xl:  48px;
  --mb-text-5xl:  60px;
  --mb-text-6xl:  72px;

  --mb-leading-tight:  1.15;
  --mb-leading-snug:   1.3;
  --mb-leading-normal: 1.5;
  --mb-leading-relaxed:1.65;

  --mb-weight-light:    300;
  --mb-weight-regular:  400;
  --mb-weight-medium:   500;
  --mb-weight-semibold: 600;
  --mb-weight-bold:     700;

  /* -------------------- MOTION -------------------- */
  /* Home + app keep motion quiet: 150–300ms, ease-out. Framer-motion is
     largely set to 0 duration on the modern dashboard -- prefer CSS
     transitions on color/shadow/transform. */
  --mb-ease:       cubic-bezier(0.2, 0, 0, 1);
  --mb-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --mb-dur-fast:   150ms;
  --mb-dur-base:   200ms;
  --mb-dur-slow:   300ms;
}

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

html { font-family: var(--mb-font-body); color: var(--mb-fg); }

.mb-display-1,
.mb-h-hero {
  font-family: var(--mb-font-display);
  font-weight: var(--mb-weight-medium);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: var(--mb-leading-tight);
  letter-spacing: -0.015em;
  color: var(--mb-fg-strong);
}

.mb-display-2,
.mb-h-section {
  font-family: var(--mb-font-display);
  font-weight: var(--mb-weight-medium);
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mb-fg-strong);
}

.mb-h1 {
  font-family: var(--mb-font-display);
  font-weight: 600;
  font-size: var(--mb-text-3xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mb-fg-strong);
}

.mb-h2 {
  font-family: var(--mb-font-display);
  font-weight: 600;
  font-size: var(--mb-text-2xl);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--mb-fg-strong);
}

.mb-h3 {
  font-family: var(--mb-font-display);
  font-weight: 600;
  font-size: var(--mb-text-xl);
  line-height: 1.3;
  color: var(--mb-fg);
}

.mb-h4 {
  font-family: var(--mb-font-body);
  font-weight: 600;
  font-size: var(--mb-text-md);
  line-height: 1.35;
  color: var(--mb-fg);
}

.mb-eyebrow {
  font-family: var(--mb-font-body);
  font-weight: 600;
  font-size: var(--mb-text-xs);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-primary);
}

.mb-body-lg,
.mb-lead {
  font-family: var(--mb-font-body);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.5;
  color: var(--mb-fg-muted);
}

.mb-body,
.mb-p {
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-base);
  line-height: var(--mb-leading-relaxed);
  color: var(--mb-fg);
}

.mb-body-sm {
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-sm);
  line-height: 1.5;
  color: var(--mb-fg-muted);
}

.mb-caption {
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-xs);
  line-height: 1.4;
  color: var(--mb-fg-subtle);
}

.mb-label {
  font-family: var(--mb-font-body);
  font-weight: 500;
  font-size: var(--mb-text-sm);
  line-height: 1.4;
  color: var(--mb-fg);
}

.mb-mono,
.mb-code {
  font-family: var(--mb-font-mono);
  font-size: 0.9em;
  font-variant-ligatures: none;
  color: var(--mb-slate-800);
  background: var(--mb-slate-100);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.mb-metric-value {
  font-family: var(--mb-font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #000;
}

.mb-metric-label {
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-sm);
  line-height: 1.4;
  color: var(--mb-fg-muted);
}