/* ============================================================
   Magic Partner — Colors & Type Foundations
   Brand: Magic Partner — "tu socio mágico" para externalizar
   fuerza de ventas, desarrollo tecnológico y consultoría.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Futura FW";
  src: url("./fonts/FUTRFW.TTF") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     PRIMARY BRAND COLORS
     The three pillars of the Magic Partner identity, taken
     straight from the logo's intertwined M ribbons.
     ============================================================ */
  --mp-navy:    #154399; /* Deep blue — authority, trust, depth   */
  --mp-blue:    #1D89BA; /* Mid blue   — clarity, communication   */
  --mp-cyan:    #21D4D9; /* Bright cyan — energy, "magic", spark  */

  /* Aliases (semantic) */
  --brand-primary:   var(--mp-navy);
  --brand-secondary: var(--mp-blue);
  --brand-accent:    var(--mp-cyan);

  /* ============================================================
     EXTENDED PALETTE — tints & shades for each brand color.
     Built around the three pillars so everything stays on-brand.
     ============================================================ */
  --mp-navy-50:  #E7EDF7;
  --mp-navy-100: #C2D0EA;
  --mp-navy-200: #8FA8D5;
  --mp-navy-300: #5C7FC0;
  --mp-navy-400: #305FAE;
  --mp-navy-500: #154399; /* base */
  --mp-navy-600: #103780;
  --mp-navy-700: #0C2A63;
  --mp-navy-800: #081D45;
  --mp-navy-900: #04122C;

  --mp-blue-50:  #E5F2F8;
  --mp-blue-100: #BEDDED;
  --mp-blue-200: #8CC2DC;
  --mp-blue-300: #56A6CB;
  --mp-blue-400: #2E94C2;
  --mp-blue-500: #1D89BA; /* base */
  --mp-blue-600: #166E97;
  --mp-blue-700: #105374;
  --mp-blue-800: #0A3851;
  --mp-blue-900: #051F2F;

  --mp-cyan-50:  #E4FBFB;
  --mp-cyan-100: #BCF4F5;
  --mp-cyan-200: #8AEBEE;
  --mp-cyan-300: #52E0E5;
  --mp-cyan-400: #2BD8DE;
  --mp-cyan-500: #21D4D9; /* base */
  --mp-cyan-600: #17B0B5;
  --mp-cyan-700: #11878B;
  --mp-cyan-800: #0B5E61;
  --mp-cyan-900: #053435;

  /* ============================================================
     NEUTRALS — taken from the "PARTNER" wordmark gray and
     the muted city silhouettes in the brand photography.
     ============================================================ */
  --mp-white:    #FFFFFF;
  --mp-gray-50:  #F7F8FA;
  --mp-gray-100: #EEF1F5;
  --mp-gray-200: #DDE2EA;
  --mp-gray-300: #C4CBD6;
  --mp-gray-400: #9AA2AE;
  --mp-gray-500: #7A8290; /* "PARTNER" wordmark gray */
  --mp-gray-600: #5A6271;
  --mp-gray-700: #3F4654;
  --mp-gray-800: #262C38;
  --mp-gray-900: #11151E;
  --mp-black:    #050810;

  /* ============================================================
     SEMANTIC TOKENS
     ============================================================ */

  /* Surfaces */
  --surface-canvas:    var(--mp-white);
  --surface-subtle:    var(--mp-gray-50);
  --surface-muted:     var(--mp-gray-100);
  --surface-inverse:   var(--mp-navy-800);
  --surface-brand:     var(--mp-navy);
  --surface-brand-alt: var(--mp-cyan);

  /* Foregrounds */
  --fg-1: var(--mp-gray-900);  /* primary text */
  --fg-2: var(--mp-gray-700);  /* secondary text */
  --fg-3: var(--mp-gray-500);  /* tertiary / metadata */
  --fg-4: var(--mp-gray-400);  /* disabled / hint */
  --fg-on-brand:    var(--mp-white);
  --fg-on-cyan:     var(--mp-navy-800);
  --fg-link:        var(--mp-blue);
  --fg-link-hover:  var(--mp-navy);
  --fg-accent:      var(--mp-cyan-700);

  /* Borders & lines */
  --border-subtle:  var(--mp-gray-200);
  --border-default: var(--mp-gray-300);
  --border-strong:  var(--mp-gray-500);
  --border-brand:   var(--mp-blue-300);

  /* Status (derived to stay in palette spirit) */
  --status-success: #1DBA7E;
  --status-warning: #F2A93B;
  --status-error:   #E05050;
  --status-info:    var(--mp-blue-500);

  /* ============================================================
     SIGNATURE GRADIENTS
     Built from the logo's three ribbon colors.
     ============================================================ */
  --gradient-magic:      linear-gradient(135deg, var(--mp-navy) 0%, var(--mp-blue) 50%, var(--mp-cyan) 100%);
  --gradient-magic-soft: linear-gradient(135deg, var(--mp-navy-700) 0%, var(--mp-blue-500) 60%, var(--mp-cyan-400) 100%);
  --gradient-cool:       linear-gradient(180deg, var(--mp-blue) 0%, var(--mp-cyan) 100%);
  --gradient-deep:       linear-gradient(180deg, var(--mp-navy-800) 0%, var(--mp-navy) 100%);
  --gradient-spark:      linear-gradient(90deg, var(--mp-cyan) 0%, var(--mp-blue) 100%);
  /* radial spotlight, useful on hero sections */
  --gradient-spotlight:  radial-gradient(80% 60% at 70% 30%,
                            rgba(33,212,217,0.35) 0%,
                            rgba(29,137,186,0.15) 40%,
                            rgba(21,67,153,0.0) 70%);

  /* ============================================================
     TYPOGRAPHY — base
     Display: "Futura FW" (FUTRFW.TTF) — the geometric all-caps
     face used for "MAGIC" and headlines.
     Body:    Montserrat (Thin/Light/Bold provided).
     ============================================================ */
  --font-display: "Futura FW", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Menlo", monospace;

  /* Weights actually shipped */
  --weight-thin:    100;
  --weight-light:   300;
  --weight-regular: 400; /* fallback only — not provided, falls back to Light visually if missing */
  --weight-bold:    700;

  /* Modular type scale (1.250 — major third) */
  --fs-12: 0.75rem;   /* 12 */
  --fs-14: 0.875rem;  /* 14 */
  --fs-16: 1rem;      /* 16 */
  --fs-18: 1.125rem;  /* 18 */
  --fs-20: 1.25rem;   /* 20 */
  --fs-24: 1.5rem;    /* 24 */
  --fs-32: 2rem;      /* 32 */
  --fs-40: 2.5rem;    /* 40 */
  --fs-56: 3.5rem;    /* 56 */
  --fs-72: 4.5rem;    /* 72 */
  --fs-96: 6rem;      /* 96 */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-base:   1.5;
  --lh-relaxed:1.65;

  --ls-display: 0.05em;
  --ls-eyebrow: 0.22em;   /* "PARTNER"-style wide tracking */
  --ls-wide:    0.08em;
  --ls-normal:  0;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;
  --space-32:8rem;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ============================================================
     SHADOWS — soft, cool-cast (a hint of navy in the alpha)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(8, 29, 69, 0.06);
  --shadow-sm: 0 2px 6px rgba(8, 29, 69, 0.08);
  --shadow-md: 0 8px 20px rgba(8, 29, 69, 0.10);
  --shadow-lg: 0 18px 40px rgba(8, 29, 69, 0.14);
  --shadow-xl: 0 30px 60px rgba(8, 29, 69, 0.18);
  --shadow-cyan-glow: 0 10px 30px rgba(33, 212, 217, 0.35);
  --shadow-navy-glow: 0 10px 30px rgba(21, 67, 153, 0.35);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}

/* ============================================================
   SEMANTIC ELEMENTS — drop-in styles
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(var(--fs-40), 6vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: geometricPrecision;
  color: var(--fg-1);
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(var(--fs-32), 4.2vw, var(--fs-56));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: geometricPrecision;
  color: var(--fg-1);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-weight: var(--weight-light);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

small, .caption {
  font-size: var(--fs-14);
  color: var(--fg-3);
  line-height: var(--lh-base);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--surface-muted);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.35em;
  color: var(--fg-1);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

/* Utility: gradient text */
.text-gradient {
  background: var(--gradient-magic);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}