/* ============================================================================
   Design System MWM 2026 — Tokens (fuente única de verdad)
   Destilado del theme real mowomo.net/mowomo-2026 (wp-content/themes/mowomo-2026).
   Estética: tema CLARO, editorial-tech; mucho blanco, tinta casi negra,
   azul eléctrico de marca con acento violeta; formas sobrias, sombras suaves.

   Uso:  @import ".../tokens.css";  luego consume las var(--mwm-*).
   ============================================================================ */

:root {
  /* ── Marca / acento ──────────────────────────────────────────────────── */
  --mwm-blue:        #2C63F5;   /* azul de acción (botones, enlaces): 4,99:1 con blanco (AA). El de marca, en el gradiente */
  --mwm-blue-deep:   #2450C7;   /* azul profundo (hover/pressed)            */
  --mwm-violet:      #7C5CFC;   /* violeta (fin del gradiente)             */
  --mwm-grad:        linear-gradient(90deg, var(--mwm-blue), var(--mwm-violet));
  --mwm-grad-hero:   linear-gradient(135deg, #3B6EF6, #7C5CFC);  /* piezas hero: igual en claro y oscuro */
  --mwm-on-brand:    #FFFFFF;   /* texto e iconos SOBRE el azul de acción   */
  --mwm-on-hero:     #FFFFFF;   /* texto sobre --mwm-grad-hero (no cambia)  */

  /* ── Tinta (texto) ───────────────────────────────────────────────────── */
  --mwm-ink:         #101517;   /* texto principal                         */
  --mwm-ink-deep:    #0A0D0F;   /* titulares de máximo contraste           */
  --mwm-ink-70:      rgba(16, 21, 23, 0.64);  /* texto secundario          */
  --mwm-ink-50:      rgba(16, 21, 23, 0.60);  /* texto terciario / hint (≥ 4,5:1 en soft) */

  /* ── Superficies (fondo) ─────────────────────────────────────────────── */
  --mwm-bg:          #FFFFFF;   /* lienzo base                             */
  --mwm-bg-soft:     #F5F7FC;   /* sección/superficie suave                */
  --mwm-bg-soft-2:   #EEF1FA;   /* superficie suave 2 (cards en soft)      */
  --mwm-paper:       #FBFAF7;   /* papel cálido (bloques editoriales)      */

  /* ── Líneas / bordes ─────────────────────────────────────────────────── */
  --mwm-line:        rgba(16, 21, 23, 0.10);  /* borde sutil               */
  --mwm-line-strong: rgba(16, 21, 23, 0.18);  /* borde marcado             */

  /* ── Colores funcionales ─────────────────────────────────────────────── */
  --mwm-green:       #16A34A;   /* éxito / positivo                        */
  --mwm-amber:       #D9A441;   /* aviso / atención                        */
  --mwm-care:        #EA445A;   /* error / crítico (módulo "care")         */
  /* Texto SOBRE los tintes de estado (chips, avisos): el color de estado tal cual no llega
     a 4,5:1 sobre su propio tinte. Para el punto o el borde, el de arriba; para letras, estos. */
  --mwm-green-ink:   #107837;
  --mwm-amber-ink:   #8B641C;
  --mwm-care-ink:    #CD172F;
  --mwm-care-deep:   #C92F44;

  /* ── Tipografía: familias ────────────────────────────────────────────── */
  --mwm-font-display: "Space Grotesk", system-ui, sans-serif;  /* titulares */
  --mwm-font-body:    "Inter", system-ui, sans-serif;          /* cuerpo/UI */
  --mwm-font-mono:    ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;

  /* ── Tipografía: pesos ───────────────────────────────────────────────── */
  --mwm-fw-regular:  400;
  --mwm-fw-medium:   500;
  --mwm-fw-semi:     560;   /* peso intermedio característico del theme     */
  --mwm-fw-bold:     600;
  --mwm-fw-black:    700;

  /* ── Tipografía: escala fluida (clamp) ───────────────────────────────── */
  --mwm-type-home-hero:      clamp(48px, 8vw,   72px);
  --mwm-type-page-hero:      clamp(40px, 6.5vw, 64px);
  --mwm-type-page-title:     clamp(36px, 5vw,   52px);  /* = h1              */
  --mwm-type-section-title:  clamp(28px, 3.5vw, 40px);  /* = h2              */
  --mwm-type-panel-title:    clamp(24px, 2.8vw, 32px);
  --mwm-type-card-title:     clamp(18px, 1.4vw, 22px);  /* = h3              */
  --mwm-type-lede:           18px;   /* entradilla                          */
  --mwm-type-body:           16px;   /* cuerpo base                         */
  --mwm-type-eyebrow:        15px;   /* antetítulo / label                  */

  /* ── Radios ──────────────────────────────────────────────────────────── */
  --mwm-radius-tag:    4px;    /* tags, avatares, chips                     */
  --mwm-radius-btn:    8px;    /* botones, inputs                          */
  --mwm-radius-card:   12px;   /* tarjetas / paneles                       */

  /* ── Sombras (suaves, gran difuminado, spread negativo) ──────────────── */
  --mwm-shadow-card:  0 20px 40px -18px rgba(16, 21, 23, 0.18);
  --mwm-shadow-pop:   0 16px 30px -12px rgba(16, 21, 23, 0.26);
  --mwm-shadow-hi:    0 18px 40px -28px rgba(16, 21, 23, 0.35);
  --mwm-focus-ring:   0 0 0 3px color-mix(in srgb, var(--mwm-blue) 35%, transparent);

  /* ── Botones ─────────────────────────────────────────────────────────── */
  --mwm-btn-min-height:  48px;
  --mwm-btn-padding-y:   12px;
  --mwm-btn-padding-x:   24px;
  --mwm-btn-radius:      var(--mwm-radius-btn);
  --mwm-btn-border-w:    2.5px;
  --mwm-btn-font-size:   16px;
  --mwm-btn-font-weight: var(--mwm-fw-medium);
  --mwm-btn-line-height: 24px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --mwm-page-width:      1372px;
  --mwm-measure:         760px;   /* ancho de lectura óptimo                */
  --mwm-page-gutter:     32px;
  --mwm-page-gutter-sm:  20px;
  --mwm-section-py:      128px;
  --mwm-section-py-sm:   72px;
  --mwm-section-head-gap: 80px;
  --mwm-header-offset:   96px;
}