/* ============================================================
   Marketproof — Colors & Type Foundations
   Brand tokens derived from the brandbook (branding_concepto_MarketProof.pdf)
   ============================================================ */

/* -------- Webfonts -------- */
/* Poppins is the ONLY brand typeface — used for everything: display, body, UI.
   The serif italic in the logo lives inside the logo PNG and is never used elsewhere. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 100; font-display: swap; src: url("./fonts/Poppins-Thin.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 100; font-display: swap; src: url("./fonts/Poppins-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("./fonts/Poppins-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 200; font-display: swap; src: url("./fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap; src: url("./fonts/Poppins-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("./fonts/Poppins-Italic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 500; font-display: swap; src: url("./fonts/Poppins-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap; src: url("./fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap; src: url("./fonts/Poppins-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Poppins-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap; src: url("./fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/Poppins-Black.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap; src: url("./fonts/Poppins-BlackItalic.ttf") format("truetype"); }


:root {
  /* ============================================================
     COLOR — Primary (text & backgrounds)
     Rule: 80% of any surface should be primaries. Accents ≤ 20%.
     ============================================================ */
  --mp-ink:        #0F202C;  /* deep navy — primary text on light, primary bg on dark */
  --mp-ink-90:    #1B2D3A;
  --mp-ink-80:    #2A3D4A;
  --mp-cloud:      #E6E8E7;  /* off-white surface */
  --mp-mist:       #C4C8C7;  /* warm-cool light gray */
  --mp-paper:      #FFFFFF;

  /* ============================================================
     COLOR — Accents (use sparingly: max 20% of any composition;
     only combined with primaries, never with each other)
     ============================================================ */
  --mp-mint:       #81F1C8;  /* signature mint — CTAs, highlights, accents */
  --mp-mint-soft:  #B6F6DC;
  --mp-mint-deep:  #5BCFA6;
  --mp-slate:      #465765;  /* slate accent — secondary buttons, borders, captions */
  --mp-slate-soft: #6B7B89;

  /* ============================================================
     SEMANTIC — foreground / background tokens
     ============================================================ */
  --mp-bg:           var(--mp-paper);
  --mp-bg-soft:      var(--mp-cloud);
  --mp-bg-muted:     var(--mp-mist);
  --mp-bg-inverse:   var(--mp-ink);

  --mp-fg:           var(--mp-ink);
  --mp-fg-muted:     var(--mp-slate);
  --mp-fg-subtle:    #7A8893;
  --mp-fg-inverse:   var(--mp-paper);

  --mp-accent:        var(--mp-mint);
  --mp-accent-ink:    var(--mp-ink);   /* text color when on mint */

  --mp-border:        rgba(15, 32, 44, 0.10);
  --mp-border-strong: rgba(15, 32, 44, 0.20);
  --mp-border-onDark: rgba(255, 255, 255, 0.12);

  /* ============================================================
     GLASS — the brandbook calls out a glass effect on shapes
     ============================================================ */
  --mp-glass-light:  rgba(255, 255, 255, 0.55);
  --mp-glass-dark:   rgba(15, 32, 44, 0.55);
  --mp-glass-mint:   rgba(129, 241, 200, 0.18);
  --mp-glass-blur:   blur(18px) saturate(140%);
  --mp-glass-border-light: 1px solid rgba(255,255,255,0.45);
  --mp-glass-border-dark:  1px solid rgba(255,255,255,0.10);

  /* ============================================================
     ELEVATION — soft, layered, "modern minimalist"
     ============================================================ */
  --mp-shadow-xs: 0 1px 2px rgba(15,32,44,0.04);
  --mp-shadow-sm: 0 2px 6px rgba(15,32,44,0.06), 0 1px 2px rgba(15,32,44,0.04);
  --mp-shadow-md: 0 8px 24px rgba(15,32,44,0.08), 0 2px 6px rgba(15,32,44,0.04);
  --mp-shadow-lg: 0 24px 60px rgba(15,32,44,0.12), 0 8px 16px rgba(15,32,44,0.05);
  --mp-shadow-mint: 0 12px 32px rgba(129,241,200,0.35);
  --mp-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ============================================================
     RADII — generous rounding is part of the brand
     ============================================================ */
  --mp-radius-xs: 6px;
  --mp-radius-sm: 10px;
  --mp-radius-md: 16px;
  --mp-radius-lg: 24px;     /* default for cards */
  --mp-radius-xl: 32px;     /* hero panels */
  --mp-radius-2xl: 48px;    /* large feature shapes */
  --mp-radius-pill: 999px;

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

  /* ============================================================
     MOTION — sutil, en tendencia
     ============================================================ */
  --mp-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);   /* standard ease-out */
  --mp-ease-emph:   cubic-bezier(0.16, 1, 0.3, 1);       /* emphasized */
  --mp-ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --mp-dur-fast:    140ms;
  --mp-dur-base:    220ms;
  --mp-dur-slow:    420ms;

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --mp-font-sans:    "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mp-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Base weight scale */
  --mp-w-thin:        100;
  --mp-w-light:       300;
  --mp-w-regular:     400;
  --mp-w-medium:      500;
  --mp-w-semibold:    600;
  --mp-w-bold:        700;
  --mp-w-extrabold:   800;
  --mp-w-black:       900;

  /* ============================================================
     TYPE — fluid scale (display→caption)
     Sizes use clamp(min, pref, max) for responsive use
     ============================================================ */
  --mp-fs-display:    clamp(56px, 7vw, 112px);  /* hero, eyebrow displays */
  --mp-fs-h1:         clamp(40px, 4.5vw, 72px);
  --mp-fs-h2:         clamp(32px, 3.4vw, 52px);
  --mp-fs-h3:         clamp(24px, 2.4vw, 36px);
  --mp-fs-h4:         clamp(20px, 1.8vw, 26px);
  --mp-fs-lead:       clamp(18px, 1.4vw, 22px);
  --mp-fs-body:       16px;
  --mp-fs-small:      14px;
  --mp-fs-caption:    12px;
  --mp-fs-eyebrow:    12px;

  --mp-lh-display:    1.02;
  --mp-lh-heading:    1.1;
  --mp-lh-body:       1.55;
  --mp-lh-tight:      1.25;

  --mp-tracking-tight:   -0.02em;
  --mp-tracking-display: -0.035em;
  --mp-tracking-normal:  0;
  --mp-tracking-eyebrow: 0.18em;
}

/* ============================================================
   SEMANTIC TYPE CLASSES — use these in markup
   ============================================================ */

.mp-display {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-display);
  font-weight: var(--mp-w-extrabold);
  line-height: var(--mp-lh-display);
  letter-spacing: var(--mp-tracking-display);
  color: var(--mp-fg);
  text-wrap: balance;
}
/* Headline highlight pattern — wrap one word in .mp-accent for mint emphasis.
   This replaces any "serif italic flourish" idea. Pure Poppins, color does the work. */
.mp-display .mp-accent,
.mp-h1 .mp-accent,
.mp-h2 .mp-accent {
  color: var(--mp-mint-deep);
}

.mp-h1 {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-h1);
  font-weight: var(--mp-w-bold);
  line-height: var(--mp-lh-heading);
  letter-spacing: var(--mp-tracking-tight);
  color: var(--mp-fg);
  text-wrap: balance;
}
.mp-h2 {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-h2);
  font-weight: var(--mp-w-bold);
  line-height: var(--mp-lh-heading);
  letter-spacing: var(--mp-tracking-tight);
  color: var(--mp-fg);
  text-wrap: balance;
}
.mp-h3 {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-h3);
  font-weight: var(--mp-w-semibold);
  line-height: var(--mp-lh-tight);
  letter-spacing: -0.01em;
  color: var(--mp-fg);
}
.mp-h4 {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-h4);
  font-weight: var(--mp-w-semibold);
  line-height: var(--mp-lh-tight);
  color: var(--mp-fg);
}

.mp-lead {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-lead);
  font-weight: var(--mp-w-regular);
  line-height: var(--mp-lh-body);
  color: var(--mp-fg-muted);
  text-wrap: pretty;
}
.mp-body, p.mp {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-body);
  font-weight: var(--mp-w-regular);
  line-height: var(--mp-lh-body);
  color: var(--mp-fg);
  text-wrap: pretty;
}
.mp-small {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-small);
  line-height: 1.5;
  color: var(--mp-fg-muted);
}
.mp-caption {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-caption);
  line-height: 1.4;
  color: var(--mp-fg-subtle);
}
.mp-eyebrow {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-eyebrow);
  font-weight: var(--mp-w-semibold);
  letter-spacing: var(--mp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mp-fg-muted);
}
.mp-mono {
  font-family: var(--mp-font-mono);
  font-size: var(--mp-fs-small);
  color: var(--mp-fg-muted);
}

/* Headline mint accent — the brand's only highlight mechanism */
.mp-accent { color: var(--mp-mint-deep); }

/* Sensible base */
html, body {
  background: var(--mp-bg);
  color: var(--mp-fg);
  font-family: var(--mp-font-sans);
  font-size: var(--mp-fs-body);
  line-height: var(--mp-lh-body);
  -webkit-font-smoothing: antialiased;
}