/* ============================================================================
   Juicy — Dashboard Design System · PRIMITIVOS
   ----------------------------------------------------------------------------
   Colección "Primitives" del Figma gu6rzJOo8cCgbliRyOHBuf, grupos de color.
   Los 41 valores están leídos del panel de Variables, NO del frame "Colors":
   ese frame está pintado a mano, no usa las variables del archivo, y miente
   (dice green/200 #DBF4E9 cuando la variable es #E7FEF4).

   Un primitivo SOLO nombra un color. Nunca una intención.
   Ningún componente debe consumir esta capa: para eso está la semántica.
   Nombres 1:1 con Figma (`neutral/400` → `--neutral-400`) para que el diff
   contra el panel sea mecánico.
   ============================================================================ */

:root {

  /* ---- brand (2) ----------------------------------------------------------
     ÚNICO primitivo que cambia por vertical (decisión del dueño 2026-07-16:
     todas las marcas comparten el mismo CSS; solo se mueve el accent).
     Puente con WordPress: gana el preset de la style variation activa, y el
     literal queda de fallback para el styleguide standalone, donde no hay WP.
     Fuente de verdad = presets de theme.json, NO [data-brand]/brand.css. */
  --brand-accent:    var(--wp--preset--color--custom-500, #D62A49);
  --brand-charcoal:  var(--wp--preset--color--custom-600, #22333B);

  /* ---- neutral (11) -------------------------------------------------------
     El 450 es el ÚNICO primitivo que no sale del panel de Figma. Se añadió
     porque la rampa tenía un hueco que rompía todo el texto secundario del
     sistema: 400 da 3.86:1 sobre blanco (reprueba AA) y 500 da 9.98:1
     (indistinguible del primario). No había dónde poner un gris legible que
     no fuera el primario.
     El valor NO está inventado: es el que el dueño ya había elegido a mano
     para `Product Name` en el mock del dashboard (#596068, 6.37:1). El mismo
     hueco lo taparon por su cuenta el placeholder (#6C7075) y `.dash_tag`
     (rampa 700) — tres veces, con tres colores distintos, en el mismo rango.
     Aprobado 2026-07-16. Falta crearlo en Figma. */
  --neutral-700:     #212326;
  --neutral-600:     #282B2E;
  --neutral-500:     #3E4349;
  --neutral-450:     #596068;   /* AÑADIDO · no existe en Figma — crear allá */
  --neutral-400:     #78838F;
  --neutral-300:     #939FAC;
  --neutral-250:     #CFD7E1;
  --neutral-200:     #E5EAEF;
  --neutral-150:     #F0F3F6;
  --neutral-100:     #F4F7F9;
  --neutral-white:   #FFFFFF;

  /* ---- ui (5) ------------------------------------------------------------- */
  --ui-800:          #FF2E70;
  --ui-700:          #FF9000;
  --ui-600:          #FFC600;
  --ui-500:          #00B4BD;
  --ui-400:          #9366DD;

  /* ---- red (6) ------------------------------------------------------------ */
  --red-700:         #601B16;
  --red-600:         #C0362D;
  --red-500:         #F04438;
  --red-400:         #F68F88;
  --red-300:         #FCDDDB;
  --red-200:         #FDEDEB;

  /* ---- orange (6) --------------------------------------------------------- */
  --orange-700:      #93370D;
  --orange-600:      #DC6803;
  --orange-500:      #FF9100;
  --orange-400:      #FFBB00;
  --orange-300:      #FFEBB2;
  --orange-200:      #FFF4D6;

  /* ---- green (6) ---------------------------------------------------------- */
  --green-700:       #05603A;
  --green-600:       #027A48;
  --green-500:       #12B76A;
  --green-400:       #32D583;
  --green-300:       #C1F2DA;
  --green-200:       #E7FEF4;

  /* ---- blue (6) ----------------------------------------------------------- */
  --blue-700:        #194185;
  --blue-600:        #1570EF;
  --blue-500:        #2E90FA;
  --blue-400:        #84CAFF;
  --blue-300:        #DAEFFF;
  --blue-200:        #E8F4FF;

}