/* ==========================================================================
   mipitch.app · design-tokens.css  (v9 — Rediseño «El taller del fundador»)
   ==========================================================================
   Fuente de verdad del sistema de diseño. Rediseño 2026: paleta cálida
   (papel + espresso suave + oro miel), tipografía Fraunces/Inter/Caveat.

   Estructura:
     1. Primitivos      — valores crudos de marca (color, fuente, medida)
     2. Semánticos      — para qué se usa cada valor (fondo, texto, estado…)
     3. Alias legados   — los nombres que ya usan las páginas (--navy, --azul,
                          --ink, --tinta…) remapeados a la nueva paleta, para
                          re-skin sin tocar cada página.

   Roles de color tras el rediseño:
     - «navy» (antes azul marino) → espresso cálido: títulos, botones, topbar.
     - «yellow» → oro miel apagado: marcador, puntaje, acentos. Nunca relleno de botón grande.
     - «blue» (antes acento/enlace) → caramelo cálido: eyebrows, enlaces, labels.

   Nota: los colores del PPTX (deck-pro.js, deck.js, plantillas.html JS) son
   constantes JS sin '#' (formato PptxGenJS). Deben sincronizarse a mano con
   los primitivos de aquí; se marcan con [PPTX].
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     1. PRIMITIVOS
     ------------------------------------------------------------------ */

  /* Marca [PPTX: los cinco primeros existen como constantes en JS] */
  --mp-navy:        #4A4034;   /* espresso cálido: títulos, botones primarios, topbar */
  --mp-blue:        #A06A2C;   /* caramelo: acentos, enlaces, eyebrows */
  --mp-yellow:      #E7B455;   /* oro miel: marcador, puntaje, CTA Pro */
  --mp-paper:       #F7F3EA;   /* papel cálido: fondo general del sitio */
  --mp-ink:         #332D24;   /* tinta cálida: texto de cuerpo */
  --mp-gray:        #857A69;   /* gris cálido: bordes, iconos, placeholders, texto secundario grande */
  --mp-gray-text:   #6F6556;   /* gris cálido AA para texto secundario PEQUEÑO (5.2:1 sobre papel, 5.6:1 sobre crema) */
  --mp-yellow-hover:#F0C46A;   /* oro miel al pasar el cursor sobre un botón oro */
  --mp-line:        #EAE1CF;   /* línea: bordes y separadores */
  --mp-white:       #FFFFFF;

  /* Superficies derivadas */
  --mp-cream:       #FFFDF8;   /* fondo de inputs, textareas y tarjetas */
  --mp-paper-hover: #FBF9F3;   /* hover de cabeceras de paso */
  --mp-paper-off:   #F0EBDF;   /* tarjeta desactivada («no aplica») */

  /* Estado: éxito (verde AA). #1F7A3D = 5.37:1 sobre blanco, cumple AA. */
  --mp-green:       #1F7A3D;
  --mp-green-bg:    #E9F6EC;   /* fondo suave de éxito */
  --mp-green-line:  #B7E0C2;   /* borde de éxito */

  /* Estado: advertencia (ámbar) */
  --mp-amber:       #B77400;   /* barras de puntaje bajo */
  --mp-amber-text:  #8A6D00;   /* etiqueta "Pro" en selector de diseño */
  --mp-amber-bg:    #FCF3DD;   /* fondo de sugerencia */

  /* Estado: error (rojo) */
  --mp-red:         #B23A29;   /* mensajes de error en formularios */
  --mp-red-alt:     #B3402A;   /* medidor "te pasas de tiempo" */
  --mp-red-bg:      #FBEAE5;   /* fondo del medidor pasado */

  /* Informativo (miel suave) */
  --mp-blue-bg:     #F6EFE0;   /* fondo de pills y medidor "corto" */

  /* Neutros de control */
  --mp-control-off: #D8CDB4;   /* switch apagado, barras N/A */
  --mp-placeholder: #A79C88;   /* placeholder de textareas */

  /* Tipografía */
  --mp-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;  /* titulares editoriales */
  --mp-font-body:    'Inter', sans-serif;                            /* todo el cuerpo */
  --mp-font-accent:  'Caveat', cursive;                              /* voz de coach manuscrita */
  /* [PPTX] equivalentes en presentaciones: Georgia/serif / Calibri */

  /* Escala tipográfica (normaliza la nube de tamaños actual) */
  --mp-text-2xs:  .72rem;    /* chips, notas legales, pies */
  --mp-text-xs:   .78rem;    /* enlaces menores, hints */
  --mp-text-sm:   .85rem;    /* texto secundario, medidores */
  --mp-text-md:   .95rem;    /* cuerpo dentro de tarjetas, botones */
  --mp-text-base: 1rem;      /* cuerpo base (body = 16px) */
  --mp-text-lg:   1.35rem;   /* h2 de tarjeta, eyebrow Caveat */
  --mp-text-xl:   1.6rem;    /* saludo Caveat del hero */
  --mp-text-2xl:  2rem;      /* puntaje del círculo */
  --mp-text-hero: clamp(2.1rem, 6vw, 3.3rem);  /* h1 del hero */

  --mp-leading-tight: 1.08;  /* titulares */
  --mp-leading-body:  1.6;   /* cuerpo */

  /* Espaciado (escala de 4px) */
  --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-14: 56px;

  /* Layout */
  --mp-wrap-max: 760px;              /* ancho de columna única */
  --mp-wrap-pad: 20px;               /* padding lateral del wrap */

  /* Radios */
  --mp-radius-sm:   8px;    /* etiquetas pequeñas (chip-paso, med-tag) */
  --mp-radius-md:   12px;   /* inputs, textareas, cajas menores */
  --mp-radius-lg:   18px;   /* tarjetas (section.card) */
  --mp-radius-xl:   20px;   /* modales */
  --mp-radius-pill: 999px;  /* botones, chips, barras de progreso */

  /* Sombras (teñidas de espresso cálido) */
  --mp-shadow-card:   0 1px 2px rgba(74,64,52,.05), 0 12px 32px -18px rgba(74,64,52,.22);
  --mp-shadow-card-active: 0 2px 6px rgba(74,64,52,.08), 0 20px 44px -20px rgba(74,64,52,.30);
  --mp-shadow-topbar: 0 2px 12px rgba(74,64,52,.18);
  --mp-shadow-btn:    0 8px 18px -9px rgba(74,64,52,.45);
  --mp-shadow-modal:  0 24px 60px rgba(51,45,36,.28);

  /* Anillo de foco (oro miel translúcido) */
  --mp-focus-ring: 0 0 0 3px rgba(231,180,85,.6);

  /* Duraciones y curvas */
  --mp-t-fast:   .15s;
  --mp-t-base:   .2s;
  --mp-t-slow:   .3s;
  --mp-t-bar:    .4s;
  --mp-ease-marker: cubic-bezier(.65, 0, .35, 1);

  /* ------------------------------------------------------------------
     2. SEMÁNTICOS (rol → primitivo)
     ------------------------------------------------------------------ */

  --bg-page:        var(--mp-paper);
  --bg-card:        var(--mp-cream);
  --bg-input:       var(--mp-cream);
  --bg-inverse:     var(--mp-navy);      /* topbar, puentes, overlays */

  --text-body:      var(--mp-ink);
  --text-heading:   var(--mp-navy);
  --text-muted:     var(--mp-gray);
  --text-accent:    var(--mp-blue);
  --text-inverse:   var(--mp-white);

  --border-default: var(--mp-line);
  --border-strong:  var(--mp-navy);

  --accent-hl:      var(--mp-yellow);    /* marcador, CTA Pro, progreso */

  --state-success:      var(--mp-green);
  --state-success-bg:   var(--mp-green-bg);
  --state-warning:      var(--mp-amber);
  --state-warning-bg:   var(--mp-amber-bg);
  --state-error:        var(--mp-red);
  --state-error-bg:     var(--mp-red-bg);
  --state-info-bg:      var(--mp-blue-bg);

  /* ------------------------------------------------------------------
     3. ALIAS LEGADOS (nombres que ya existen en las páginas)
     ------------------------------------------------------------------ */

  /* Familia en inglés (index, ebook, escenario) */
  --paper:  var(--mp-paper);
  --card:   var(--mp-cream);
  --navy:   var(--mp-navy);
  --blue:   var(--mp-blue);
  --yellow: var(--mp-yellow);
  --ink:    var(--mp-ink);
  --gray:   var(--mp-gray);
  --line:   var(--mp-line);

  /* Familia en español (plantillas, terminos, privacidad, reembolsos) */
  --azul:     var(--mp-blue);
  --amarillo: var(--mp-yellow);
  --tinta:    var(--mp-ink);
  --gris:     var(--mp-gray);
  --linea:    var(--mp-line);
  --blanco:   var(--mp-white);
  --radio:    var(--mp-radius-lg);
  --sombra:   var(--mp-shadow-card);
}