/* ============================================================
   MAKKI · TOKENS DE DISEÑO
   Variables de marca. La rampa sale del manual de marca: Pantone 276C (#372b62) es el
   primario, y el resto de los neutros se corrieron hacia el violeta para que
   no queden grises verdosos al lado.

   El verde NO desaparece del todo: --mk-success sigue siendo verde. En una
   pantalla que sirve almuerzos, «puede pasar» tiene que ser verde aunque la
   marca sea morada.
   ============================================================ */

:root {
  /* ---- Marca ---- */
  --mk-ink:       #291f47;  /* morado profundo · chrome (appbar/drawer) · texto fuerte */
  --mk-ink-soft:  #3a2d63;  /* un paso más claro · hover del chrome */
  --mk-brand:     #372b62;  /* Pantone 276C · primario · interacción (blanco encima 12,1:1) */
  --mk-brand-dark:#2a2049;  /* hover del primario */
  --mk-brand-lite:#7a6cad;  /* tints / anillos de foco (sin texto blanco encima) */
  --mk-brand-rgb: 55,43,98;
  --mk-clay:      #c2410c;  /* terracota · acento / CTA puntual */
  --mk-gold:      #c8961e;  /* acento secundario · uso mínimo (texto ink) */

  /* ---- Neutros (rampa cálida) ---- */
  --mk-white:  #ffffff;
  --mk-base:   #f7f6f9;  /* fondo de página */
  --mk-border: #e4e1ea;
  --mk-divider:#efedf3;
  --mk-mist:   #b6adc7;  /* texto terciario · muted sobre oscuro · íconos del drawer */
  --mk-muted:  #635b73;  /* texto secundario sobre claro (AA) */

  /* ---- Texto ---- */
  --mk-text:         var(--mk-ink);
  --mk-text-muted:   var(--mk-muted);
  --mk-text-on-dark: #ffffff;

  /* ---- Estados ---- */
  --mk-success: #146c4e;
  --mk-info:    #1f6f8b;
  --mk-warning: #e0a030;
  --mk-danger:  #c0392b;

  /* ---- Tipografía ---- */
  --mk-font-display: "Archivo", system-ui, sans-serif;
  --mk-font-text:    "Hanken Grotesk", system-ui, sans-serif;
  --mk-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---- Radios ---- */
  --mk-radius-sm:   6px;
  --mk-radius-md:   10px;
  --mk-radius-lg:   16px;
  --mk-radius-pill: 999px;

  /* ---- Elevación ---- */
  --mk-shadow-sm: 0 1px 2px rgba(18,53,40,.06), 0 1px 3px rgba(18,53,40,.05);
  --mk-shadow-md: 0 4px 12px rgba(18,53,40,.08), 0 2px 4px rgba(18,53,40,.05);
  --mk-shadow-lg: 0 12px 32px rgba(18,53,40,.12), 0 4px 8px rgba(18,53,40,.06);
}