/* ============================================================
   Marvelkleen — design tokens
   Paleta extraída del logo (verdes corporativos + dorado).
   ============================================================ */

:root {
  /* Paleta — verdes del logo */
  --mk-green-900: #0a4422;       /* verde muy oscuro (barra inferior del logo) */
  --mk-green-800: #14582d;       /* verde profundo */
  --mk-green-700: #1d6e3d;       /* verde corporativo principal (texto del logo) */
  --mk-green-500: #2f9b53;       /* verde brillante (gradiente del símbolo) */
  --mk-green-300: #7cc295;       /* verde claro */
  --mk-green-100: #eaf5ed;       /* fondo verde muy suave */

  /* Acentos dorados (símbolo del logo) */
  --mk-gold-700:  #9c8444;       /* dorado oscuro */
  --mk-gold-500:  #c9a456;       /* dorado del símbolo */
  --mk-gold-300:  #e3cb84;       /* dorado claro */
  --mk-gold-100:  #f5ecd0;       /* dorado muy suave */

  /* Whatsapp / utilidades */
  --mk-whatsapp:  #25d366;

  /* Tinta */
  --mk-ink-900:   #181a1c;
  --mk-ink-700:   #32373c;
  --mk-ink-500:   #6d6d6d;
  --mk-ink-300:   #c8c8c8;

  /* Fondos */
  --mk-bg:        #ffffff;
  --mk-bg-alt:    #f4f4f4;
  --mk-bg-soft:   #efefef;

  /* Estados */
  --mk-warn:      #c9a200;
  --mk-danger:    #c0392b;
  --mk-info:      #1e1b87;

  /* Tipografía
     Display: Bricolage Grotesque — editorial, contrastada, con carácter.
     Body:    Roboto                — neutra, alta legibilidad para texto largo. */
  --mk-font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mk-font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;

  /* Escala tipográfica */
  --mk-text-xs:   12px;
  --mk-text-sm:   14px;
  --mk-text-md:   16px;
  --mk-text-lg:   18px;
  --mk-text-xl:   22px;
  --mk-text-2xl:  28px;
  --mk-text-3xl:  36px;
  --mk-text-4xl:  48px;

  --mk-lh-tight:  1.15;
  --mk-lh-normal: 1.5;

  /* Espaciado (escala 4) */
  --mk-sp-1: 4px;
  --mk-sp-2: 8px;
  --mk-sp-3: 12px;
  --mk-sp-4: 16px;
  --mk-sp-5: 24px;
  --mk-sp-6: 32px;
  --mk-sp-7: 48px;
  --mk-sp-8: 64px;
  --mk-sp-9: 96px;

  /* Layout */
  --mk-container: 1280px;
  --mk-radius:    4px;
  --mk-radius-lg: 8px;

  /* Sombras */
  --mk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mk-shadow:    0 2px 8px rgba(0, 0, 0, 0.08);
  --mk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Tiempos */
  --mk-trans:     180ms ease;
}