/* ─── Multiply — fuentes y tokens ──────────────────────────────────────
   Copiado de ../../Design/tokens/. La fuente de verdad sigue siendo
   Design/; si allá cambia un token, se refleja aquí a mano.
   ──────────────────────────────────────────────────────────────────── */

/* ═══ @font-face — solo los pesos en uso ═══════════════════════════ */
@font-face { font-family: "Tomato Grotesk"; font-weight: 500; font-style: normal; font-display: swap;
  src: url(../fonts/tomato-grotesk/TomatoGrotesk-Medium.otf) format("opentype"); }
@font-face { font-family: "Tomato Grotesk"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(../fonts/tomato-grotesk/TomatoGrotesk-Bold.otf) format("opentype"); }
@font-face { font-family: "Grtsk Tera"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(../fonts/grtsk-tera/Grtsk-Tera-Regular.otf) format("opentype"); }
@font-face { font-family: "Grtsk Tera"; font-weight: 500; font-style: normal; font-display: swap;
  src: url(../fonts/grtsk-tera/Grtsk-Tera-Medium.otf) format("opentype"); }
@font-face { font-family: "Aeonik"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(../fonts/aeonik/Aeonik-Regular.ttf) format("truetype"); }
@font-face { font-family: "Aeonik"; font-weight: 500; font-style: normal; font-display: swap;
  src: url(../fonts/aeonik/Aeonik-Medium.ttf) format("truetype"); }

/* ═══ Tokens del sistema de diseño ═════════════════════════════════ */
/* ─── Multiply Color Tokens ───────────────────────────────────────────────── */
:root {
  /* Brand primaries */
  --color-mint:          rgb(1, 229, 168);       /* primary teal/mint — dominant brand color */
  --color-mint-alt:      rgb(1, 229, 167);       /* mint variant (imperceptible shift) */
  --color-mint-deep:     rgb(14, 201, 179);      /* deeper teal — tagline accent, icon */
  --color-purple:        rgb(135, 0, 255);       /* electric purple */
  --color-purple-mid:    rgb(97, 81, 227);       /* softer indigo-purple */
  --color-purple-10:     rgba(135, 0, 255, 0.1); /* purple wash */
  --color-purple-67:     rgba(135, 0, 255, 0.67);/* purple radial glow */

  /* Accent / supporting */
  --color-salmon:        rgb(255, 168, 159);     /* warm coral — gradient accent */
  --color-steel-blue:    rgb(129, 157, 190);     /* muted blue-grey */
  --color-yellow:        rgb(249, 239, 2);       /* electric yellow */

  /* Neutrals / backgrounds */
  --color-black:         rgb(0, 0, 0);
  --color-void:          rgb(1, 5, 6);           /* near-black bg #1 — primary dark */
  --color-dark:          rgb(21, 21, 21);        /* near-black bg #2 */
  --color-dark-2:        rgb(31, 31, 31);        /* near-black bg #3 */
  --color-dark-3:        rgb(41, 41, 41);        /* near-black bg #4 */
  --color-white:         rgb(255, 255, 255);

  /* Semantic */
  --color-bg:            var(--color-void);
  --color-bg-alt:        var(--color-dark);
  --color-bg-warm:       var(--color-dark-2);
  --color-text-primary:  var(--color-white);
  --color-text-accent:   var(--color-mint);
  --color-text-muted:    rgba(255, 255, 255, 0.56);
  --color-text-subtle:   rgba(255, 255, 255, 0.4);
  --color-divider:       rgba(1, 229, 167, 0.4);
  --color-divider-grad:  linear-gradient(90deg, rgb(1,229,167) 6.52%, rgb(97,81,227) 100%);

  /* Shadows */
  --shadow-wordmark:
    0px 68px 19px 0px rgba(0,0,0,0.01),
    0px 44px 17px 0px rgba(0,0,0,0.07),
    0px 25px 15px 0px rgba(0,0,0,0.24),
    0px 11px 11px 0px rgba(0,0,0,0.41),
    0px 3px 6px 0px rgba(0,0,0,0.47);
  --shadow-deep:
    0px 140px 39px 0px rgba(0,0,0,0.01),
    0px 90px 36px 0px rgba(0,0,0,0.08),
    0px 50px 30px 0px rgba(0,0,0,0.28),
    0px 22px 22px 0px rgba(0,0,0,0.48),
    0px 6px 12px 0px rgba(0,0,0,0.55);
}
/* ─── Multiply Typography Tokens ─────────────────────────────────────────── */
:root {
  /* Font families */
  --font-display:  "Tomato Grotesk", system-ui, sans-serif;  /* titles, hero text */
  --font-brand:    "Grtsk Tera", system-ui, sans-serif;      /* labels, UI, taglines */
  --font-body:     "Aeonik", system-ui, sans-serif;          /* body copy, editorial */

  /* Display / Hero scale (Tomato Grotesk) */
  --text-hero-size:         150px;
  --text-hero-weight:       500;
  --text-hero-leading:      0.87;
  --text-hero-tracking:     -0.030em;

  --text-display-size:      485.97px;  /* full-bleed wordmark scale */
  --text-display-weight:    500;
  --text-display-leading:   1;
  --text-display-tracking:  -0.030em;

  /* Grtsk Tera scale — subtitles, labels, UI */
  --text-subtitle-size:     30px;
  --text-subtitle-weight:   500;
  --text-subtitle-leading:  1.2;
  --text-subtitle-tracking: 0.088em;

  --text-label-size:        17px;
  --text-label-weight:      500;
  --text-label-leading:     1.2;
  --text-label-tracking:    0.140em;

  --text-tagline-size:      26.9px;
  --text-tagline-weight:    500;
  --text-tagline-leading:   1.2;
  --text-tagline-tracking:  0.088em;

  --text-small-size:        19px;
  --text-small-weight:      500;
  --text-small-leading:     1.2;
  --text-small-tracking:    0.140em;

  /* Aeonik body scale */
  --text-body-size:         23px;
  --text-body-weight:       400;
  --text-body-leading:      1.45;
  --text-body-tracking:     0.170em;

  --text-body-sm-size:      18px;
  --text-body-sm-weight:    400;
  --text-body-sm-leading:   1.45;
  --text-body-sm-tracking:  0.170em;

  /* Tomato Grotesk UI */
  --text-ui-size:           22px;
  --text-ui-weight:         400;
  --text-ui-leading:        1.6;
  --text-ui-tracking:       0.070em;
}
/* ─── Multiply Gradient Tokens ───────────────────────────────────────────── */
:root {
  /* Brand signature gradient: purple → mint (used on key brand slides) */
  --gradient-brand: linear-gradient(238.322deg, rgb(97,81,227) -12.36%, rgb(1,229,168) 99.57%); /* @kind other */

  /* Divider / separator line gradient */
  --gradient-divider: linear-gradient(90deg, rgb(1,229,167) 6.52%, rgb(97,81,227) 100%); /* @kind other */

  /* Radial glow behind logo / hero */
  --gradient-glow: radial-gradient(500.081px 855.574px at 50% 14.46%, rgb(1,229,168) 0%, rgba(135,0,255,0.67) 71.05%); /* @kind other */

  /* Soft warm sweep (rotated blur band) */
  --gradient-warm-sweep: linear-gradient(180deg, rgb(255,168,159) 0%, rgb(1,229,168) 100%); /* @kind other */

  /* Light-mode orb gradient */
  --gradient-orb: linear-gradient(131.834deg, rgb(237,247,11) 2.97%, rgb(69,216,66) 69.54%, rgb(129,157,190) 105.34%); /* @kind other */
}
/* ─── Multiply Spacing Tokens ────────────────────────────────────────────── */
:root {
  /* Base scale */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;
  --space-13: 128px;
  --space-14: 160px;

  /* Semantic layout */
  --space-nav-height:     100px;      /* navigation bar + 1px divider */
  --space-page-gutter:    53.5px;     /* horizontal page margin */
  --space-section-gap:    160px;      /* gap between major content sections */
  --space-component-gap:  17px;       /* nav breadcrumb item gap */
  --space-content-top:    220px;      /* content start below nav */

  /* Border radius */
  --radius-pill:          112px;      /* divider line radius */
  --radius-card:          0px;        /* cards use sharp corners */
  --radius-avatar:        10px;       /* frosted glass card corner */
}

/* ═══ Escala fluida ═══════════════════════════════════════════════════════
   Los tokens del brandbook están calibrados a lienzo de 1920px. Aquí se
   reexpresan con clamp() para que sobrevivan a móvil sin perder jerarquía. */
:root {
  --fs-hero:     clamp(48px, 9.5vw, 150px);
  --fs-h2:       clamp(32px, 5vw, 76px);
  --fs-h3:       clamp(22px, 2.4vw, 34px);
  --fs-subtitle: clamp(20px, 2.1vw, 30px);
  --fs-body:     clamp(17px, 1.25vw, 23px);
  --fs-body-sm:  clamp(15px, 1vw, 18px);
  --fs-label:    clamp(12px, 0.95vw, 17px);

  --gutter:      clamp(20px, 5vw, 53.5px);
  --section-gap: clamp(80px, 11vw, 160px);
  --measure:     62ch;
}