/* =====================================================================
   MarthaFit® — Foundational tokens
   Colors, typography, spacing, radii, shadows, motion.
   Source of truth: Manual de Identidad de Marca v1.0 (2026).
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Dellatine";
  src: url("fonts/Dellatine.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans";
  src: url("fonts/SourceSans.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Montserrat (headings) loaded from Google Fonts — see <link> in HTML files. */

:root {
  /* =================================================================
     COLORS — paleta núcleo
     ================================================================= */
  --mf-morado:        #93339E;  /* color dominante — fondos, headers, CTA secundario */
  --mf-lavanda:       #FFE3FE;  /* fondo femenino, acentos suaves */
  --mf-ciruela:       #450B68;  /* "Fit" en logo, contraste sobre color */

  /* Neutrales */
  --mf-grafito:       #2F2F2F;  /* texto principal */
  --mf-gris-suave:    #D9D9D9;  /* fondos secundarios, separadores */
  --mf-gris-bg:       #F4F4F6;  /* fondo página alterno */
  --mf-gris-oscuro:   #2D2D35;  /* modo limpio / portadas masculinas */
  --mf-blanco:        #FFFFFF;
  --mf-negro:         #0A0A0A;

  /* Acentos — usar con disciplina */
  --mf-naranja:       #FF6B35;  /* CTA primario — alta energía */
  --mf-azul:          #3A6EA5;  /* contenido científico / educativo */

  /* Extensiones derivadas (para hover/press, gradientes suaves) */
  --mf-morado-700:    #7A2A84;
  --mf-morado-300:    #C083C8;
  --mf-lavanda-50:    #FFF5FF;
  --mf-naranja-700:   #E3551F;
  --mf-azul-50:       #EAF1F9;

  /* =================================================================
     SEMÁNTICA — referenciar SIEMPRE estas variables en componentes
     (no llamar al token de color directo en un componente)
     ================================================================= */
  --color-bg:               var(--mf-blanco);
  --color-bg-soft:          var(--mf-lavanda-50);
  --color-bg-muted:         var(--mf-gris-bg);
  --color-bg-brand:         var(--mf-morado);
  --color-bg-brand-dark:    var(--mf-ciruela);
  --color-bg-inverse:       var(--mf-gris-oscuro);

  --color-fg:               var(--mf-grafito);
  --color-fg-muted:         #6B6B70;
  --color-fg-soft:          #9A9AA0;
  --color-fg-on-brand:      var(--mf-blanco);
  --color-fg-on-light:      var(--mf-ciruela);
  --color-fg-accent:        var(--mf-morado);

  --color-border:           #ECECEF;
  --color-border-strong:    var(--mf-gris-suave);
  --color-border-brand:     var(--mf-morado);

  --color-cta:              var(--mf-naranja);
  --color-cta-hover:        var(--mf-naranja-700);
  --color-link:             var(--mf-morado);

  --color-edu:              var(--mf-azul);
  --color-edu-bg:           var(--mf-azul-50);

  /* =================================================================
     TYPE — families
     ================================================================= */
  --font-script:    "Dellatine", "Brush Script MT", cursive;          /* logo only */
  --font-display:   "Montserrat", "Helvetica Neue", Arial, sans-serif; /* títulos */
  --font-body:      "Source Sans", "Source Sans 3", "Source Sans Pro",
                    -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  --font-alt:       "Poppins", var(--font-body);                       /* alternativa moderna */

  /* Type scale — for Montserrat headings. Pair with body sizes. */
  --fs-display:   clamp(40px, 6vw, 72px);   /* portada hero */
  --fs-h1:        clamp(32px, 4vw, 48px);
  --fs-h2:        clamp(26px, 3vw, 36px);
  --fs-h3:        20px;
  --fs-h4:        16px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-small:     14px;
  --fs-micro:     12px;

  --lh-display:   1.05;
  --lh-heading:   1.18;
  --lh-body:      1.55;

  --tracking-eyebrow: 0.18em;   /* "V O L . 0 1 ·" header look */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;

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

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

  /* =================================================================
     RADII
     ================================================================= */
  --radius-xs:   4px;   /* chips, small badges */
  --radius-sm:   8px;   /* inputs, small cards */
  --radius-md:   12px;  /* cards estándar */
  --radius-lg:   20px;  /* cards prominentes, módulos */
  --radius-xl:   28px;  /* hero, portadas */
  --radius-pill: 999px; /* botones, tags */

  /* =================================================================
     SHADOWS — suaves, cálidas; sin oscuridad agresiva
     ================================================================= */
  --shadow-xs: 0 1px 2px rgba(69, 11, 104, 0.06);
  --shadow-sm: 0 2px 6px rgba(69, 11, 104, 0.08);
  --shadow-md: 0 8px 24px rgba(69, 11, 104, 0.10);
  --shadow-lg: 0 18px 48px rgba(69, 11, 104, 0.14);
  --shadow-ring: 0 0 0 4px rgba(147, 51, 158, 0.18);

  /* =================================================================
     MOTION
     ================================================================= */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 320ms;

  /* =================================================================
     LAYOUT
     ================================================================= */
  --container:    1200px;
  --container-sm: 760px;
  --gutter:       24px;
}

/* =====================================================================
   ELEMENT-LEVEL DEFAULTS (opt-in via class .mf-doc or via reset)
   These mirror "Jerarquía tipográfica" from the brand manual.
   ===================================================================== */
.mf-doc, .mf-doc * { box-sizing: border-box; }

.mf-doc {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mf-doc h1, .mf-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-accent);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}
.mf-doc h2, .mf-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-fg-accent);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}
.mf-doc h3, .mf-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--color-fg);
  margin: 0 0 var(--space-2);
}
.mf-doc h4, .mf-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin: 0 0 var(--space-2);
}
.mf-doc p, .mf-body { margin: 0 0 var(--space-4); }
.mf-strong { font-weight: var(--fw-semibold); color: var(--color-fg); }

.mf-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.mf-numeral {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--mf-morado);
}

.mf-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--mf-ciruela);
}

.mf-caption {
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: 1.45;
}