/* ==========================================================================
   WhizYum — Tokens de marca
   LA ÚNICA fuente de verdad de color, tipografía, radio, sombra y movimiento.

   POR QUÉ ESTE ARCHIVO EXISTE (2026-10-03)
   ---------------------------------------
   Antes de este archivo la marca vivía dentro de `landing-nutriologos.css`.
   Eso significaba que *la página que vende* era la dueña del color, y
   cualquier otra pantalla tenía que pedirle el favor. El resultado medido:

     - La landing, /login y /register usaban la escala `--wy-*`.
     - El panel usaba `#1E7A4B`, un verde QUE NO ESTÁ en esa escala.
     - `layout/app` (app del paciente) declaraba `#4F944F`, un tercer verde,
       y encima pintaba sus botones con el morado de `style.css`.
     - `config/brand.php` seguía con el morado viejo `#7F00FF`.
     - `logo.png`, `logo.svg`, `logo-mini.svg` y los iconos PWA eran morados:
       el panel mostraba UI verde con logo morado, dos marcas en una pantalla.

   Ahora los tokens viven aquí y todas las superficies los consumen: landing,
   auth, panel, admin y el tema heredado del paciente. Si mañana se mueve
   `--wy-brand-600`, cambia el producto entero — y no hace falta tocar una
   vista.

   LO QUE ESTE ARCHIVO NO HACE
   ---------------------------
   No define componentes ni reset. Solo variables. `audit_brand_tokens.php`
   falla si aparece un hex suelto fuera de aquí, que es lo que impide que esto
   vuelva a desincronizarse.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Superficies oscuras (hero + secciones de contraste)

     Decisión 2026-09-30 tras investigación de mercado:
     el tono es verde (categoría: 40%+ de logos de salud usan verde, y los dos
     competidores directos en México —HeyNutre y Avena— usan teal/azul sobre
     claro). Lo que había era verde CASI NEGRO, y la evidencia dice que el
     verde oscuro se lee como dinero/lujo (Starbucks, Rolex), no como salud.
     Por eso la escala se movió a un verde-teal profundo: mantiene el
     contraste para texto blanco (>9:1) pero se lee clínico, no serio.

     Y antes de esto había un MORADO (#9A55FF → #DA8CFF) que venía de la
     plantilla de admin de la que nació el tema, no de una decisión. 2026-10-03
     se retiró: la marca es una sola y es esta. */
  --wy-ink-900: #0C3F38;
  --wy-ink-800: #0E4F46;
  --wy-ink-700: #10685B;
  --wy-ink-600: #12806F;

  /* Marca */
  --wy-brand-700: #055A43;
  --wy-brand-600: #067A5B;
  --wy-brand-500: #0A9A73;
  --wy-brand-400: #14B98C;
  --wy-brand-300: #5FD9B4;
  --wy-brand-100: #D6F5E9;
  /* El paso más claro de la escala. Lo consumen `onboarding.css` y
     `panel.css` para el fondo de los bloques verdes; estaba definido solo en
     esas dos hojas y con otro valor, o sea que un token de la marca vivía
     fuera de la marca. */
  --wy-brand-50: #ECFBF4;

  /* Acento */
  --wy-lime-500: #B6F03C;
  --wy-lime-400: #CDFF4F;
  --wy-lime-200: #E9FFB3;

  /* Neutros cálidos */
  --wy-cream-50: #FCFBF7;
  --wy-cream-100: #F6F3EB;
  --wy-cream-200: #EFEBE0;
  --wy-sand-300: #DFD9C9;
  --wy-sand-400: #C8C1AE;

  /* Texto */
  --wy-text-900: #0A1F17;
  --wy-text-800: #163026;
  --wy-text-700: #2A3F36;
  --wy-text-600: #475C53;
  /* #6A7D74 daba 4.38:1 sobre blanco: fallaba AA en cuerpo de texto normal y
     se repetía en decenas de bloques (tarjetas de dolor, panel, alertas).
     Oscurecido a 5.19:1 sobre blanco y 4.54:1 sobre crema-100. */
  --wy-text-500: #5E716A;
  --wy-text-400: #8FA098;

  /* Semánticos */
  --wy-wa-green: #25D366;
  --wy-wa-bubble: #DCF8C6;
  /* Para superficies y bordes. Como TEXTO da 3.9:1 sobre blanco, por debajo de
     AA: por eso existe la variante `-ink` de abajo, igual que pasa con el
     ámbar. Un color semántico que solo tiene una versión obliga a usarlo
     como fondo y como texto, y una de las dos queda ilegible. */
  --wy-danger: #E5484D;
  --wy-danger-ink: #B42318;
  --wy-amber: #F0A02A;
  /* Versiones oscurecidas para TEXTO. Los tintes base son para superficies y
     bordes: como texto sobre blanco daba 2.15:1 (ámbar) y 3.57:1 (verde). */
  --wy-amber-ink: #9A5F08;
  --wy-blue: #3B82F6;

  /* Radios */
  --wy-r-sm: 10px;
  --wy-r-md: 16px;
  --wy-r-lg: 24px;
  --wy-r-xl: 32px;
  --wy-r-full: 999px;

  /* Sombras */
  --wy-sh-sm: 0 1px 2px rgba(10, 31, 23, 0.06), 0 1px 3px rgba(10, 31, 23, 0.04);
  --wy-sh-md: 0 4px 12px rgba(10, 31, 23, 0.06), 0 2px 4px rgba(10, 31, 23, 0.04);
  --wy-sh-lg: 0 12px 32px rgba(10, 31, 23, 0.09), 0 4px 8px rgba(10, 31, 23, 0.04);
  --wy-sh-xl: 0 28px 64px rgba(10, 31, 23, 0.14), 0 8px 16px rgba(10, 31, 23, 0.05);
  --wy-sh-glow: 0 0 0 1px rgba(10, 154, 115, 0.16), 0 16px 48px rgba(10, 154, 115, 0.22);

  /* Layout */
  --wy-container: 1180px;
  --wy-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --wy-section: clamp(4.5rem, 9vw, 8.5rem);

  /* Movimiento */
  --wy-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Tipografía */
  --wy-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --wy-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
}

/* --------------------------------------------------------------------------
   Roles, no tonos.

   El nombre del token debe decir para qué sirve, no de qué color es. Así el
   panel y la app del paciente pueden tener su propia densidad y su propio
   ritmo sin inventar un quinto verde.

   Estos son los que el panel y el tema heredado consumen; `--wy-brand-*` sigue
   siendo la escala de la que salen. --*/
:root {
  /* Color de marca para superficies y texto sobre claro.
     Es brand-600 y NO brand-500 a propósito: el morado que se retira daba
     3.18:1 con texto blanco y brand-500 da 3.55:1 — los dos por debajo de
     AA. brand-600 da 5.33:1. Un re-tematizado no puede empeorar el
     contraste que ya existía. */
  --wy-primary: var(--wy-brand-600);
  --wy-primary-strong: var(--wy-brand-700);
  --wy-primary-soft: var(--wy-brand-300);
  --wy-primary-wash: var(--wy-brand-100);
}