/* =========================================================
   MMH — Market Mentor Hub
   Core tokens: color + type
   ========================================================= */

/* --- Webfonts ------------------------------------------------
   Display / wordmark / headlines: Montserrat (official MMH)
   Body / UI: Inter (Google Fonts — pending confirmation)
   Self-hosted Montserrat from /fonts; Inter still via CDN.
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

:root {
  /* ---------- Neutrals (monochrome is the brand) ---------- */
  --mmh-black:        #0A0A0A;   /* Logo / primary fg on light */
  --mmh-ink:          #141414;   /* Near-black surfaces */
  --mmh-graphite:     #2A2A2A;
  --mmh-slate:        #4A4A4A;
  --mmh-steel:        #6E6E6E;
  --mmh-mist:         #A8A8A8;
  --mmh-fog:          #D4D4D4;
  --mmh-cloud:        #E8E8E8;
  --mmh-pearl:        #F3F3F3;
  --mmh-bone:         #F8F8F8;
  --mmh-white:        #FFFFFF;

  /* ---------- Accent (used sparingly — CTAs, highlights) ---------- */
  --mmh-gold:         #C9A24B;   /* "Capital" warmth, light-on-dark CTA */
  --mmh-gold-soft:    #E3C984;
  --mmh-gold-deep:    #A88544;

  /* ---------- Semantic (trading states) ---------- */
  --mmh-bull:         #1F8F5A;   /* Rendite, Gewinn */
  --mmh-bull-soft:    #E4F3EC;
  --mmh-bear:         #C0392B;   /* Verlust, Risiko */
  --mmh-bear-soft:    #FBECEA;
  --mmh-info:         #2F6BFF;

  /* ---------- Foreground / background roles ---------- */
  --fg-1:             var(--mmh-black);    /* titles, strong body */
  --fg-2:             var(--mmh-graphite); /* body copy */
  --fg-3:             var(--mmh-steel);    /* secondary/meta */
  --fg-4:             var(--mmh-mist);     /* hints */
  --fg-inverse:       var(--mmh-white);

  --bg-1:             var(--mmh-white);    /* base page */
  --bg-2:             var(--mmh-bone);     /* alt section */
  --bg-3:             var(--mmh-pearl);    /* cards */
  --bg-inverse:       var(--mmh-black);    /* dark sections */

  --border-1:         var(--mmh-cloud);
  --border-2:         var(--mmh-fog);
  --border-strong:    var(--mmh-black);

  /* ---------- Type families ---------- */
  --font-display:     'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:        'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (mobile-first, scales with clamp) ---------- */
  --fs-display:       clamp(44px, 6vw, 80px);
  --fs-h1:            clamp(36px, 4.5vw, 56px);
  --fs-h2:            clamp(28px, 3.2vw, 40px);
  --fs-h3:            clamp(22px, 2.2vw, 28px);
  --fs-h4:            20px;
  --fs-lead:          20px;
  --fs-body:          17px;
  --fs-small:         15px;
  --fs-caption:       13px;
  --fs-eyebrow:       12px;

  --lh-tight:         1.05;
  --lh-snug:          1.2;
  --lh-normal:        1.5;
  --lh-loose:         1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-xwide:   0.18em;   /* MMH eyebrows / wordmark */

  /* ---------- Spacing ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, editorial) ---------- */
  --shadow-1: 0 1px 2px rgba(10,10,10,0.04), 0 1px 1px rgba(10,10,10,0.03);
  --shadow-2: 0 4px 12px rgba(10,10,10,0.06), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-3: 0 12px 32px rgba(10,10,10,0.10), 0 4px 8px rgba(10,10,10,0.05);
  --shadow-card: 0 1px 0 rgba(10,10,10,0.04), 0 8px 24px rgba(10,10,10,0.06);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ========= Base elements ========= */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: 0; }

p  { margin: 0; color: var(--fg-2); text-wrap: pretty; }

.mmh-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.mmh-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

.mmh-lead { font-size: var(--fs-lead); color: var(--fg-2); line-height: var(--lh-normal); }
.mmh-small { font-size: var(--fs-small); color: var(--fg-3); }
.mmh-caption { font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: 0.02em; }
.mmh-mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ========= Utilities ========= */
.mmh-rule { border: 0; height: 1px; background: var(--border-1); margin: var(--sp-6) 0; }
.mmh-rule--strong { background: var(--border-strong); height: 2px; }

a { color: var(--fg-1); text-underline-offset: 3px; }
a:hover { opacity: 0.7; transition: opacity var(--dur-fast) var(--ease-out); }