/* Design tokens de Trujillo Perfumes (2.3.0).
   Toda la apariencia sale de aquí: panel, catálogo y login.
   Configuración → Apariencia sobrescribe --oro, --carbon y --fondo. */
:root{
  /* superficies */
  --fondo: #F6F5F2;
  --superficie: #FFFFFF;
  --superficie-2: #FAF9F6;
  --superficie-3: #F1EFEA;
  --borde: #E8E4DC;
  --borde-fuerte: #D8D2C6;

  /* texto */
  --texto: #17181A;
  --texto-2: #5E6167;
  --texto-3: #8B9097;

  /* sidebar (carbón casi negro, como las referencias) */
  --carbon: #131417;
  --carbon-2: #1D1F23;
  --carbon-3: #2A2D32;
  --carbon-texto: #EDEAE4;
  --carbon-texto-2: #9DA1A8;

  /* dorado de marca */
  --oro: #B8860B;
  --oro-claro: #D4AF52;
  --oro-hover: #9C7209;
  --oro-texto: #8A6508;
  --oro-suave: #F7F0DE;
  --oro-borde: #E7D6A8;

  /* estados */
  --ok: #1F7A4C;        --ok-fondo: #E6F4EC;   --ok-borde: #BFE3CE;
  --aviso: #9A6206;     --aviso-fondo: #FCF2DF; --aviso-borde: #EFDCAE;
  --peligro: #B3392C;   --peligro-fondo: #FBE9E6; --peligro-borde: #F0C9C3;
  --info: #2360A5;      --info-fondo: #E8F0FA;  --info-borde: #C6DAF2;
  --morado: #61489C;    --morado-fondo: #F0EBF9; --morado-borde: #DCD1F0;
  --neutro: #5E6167;    --neutro-fondo: #F0EEEA; --neutro-borde: #E1DDD5;

  /* forma */
  --radio-s: 8px; --radio: 12px; --radio-l: 16px; --radio-xl: 20px; --radio-pill: 999px;
  --sombra: 0 1px 2px rgba(23,24,26,.04), 0 1px 3px rgba(23,24,26,.03);
  --sombra-card: 0 1px 2px rgba(23,24,26,.05), 0 4px 14px rgba(23,24,26,.04);
  --sombra-flotante: 0 18px 44px rgba(23,24,26,.16), 0 3px 8px rgba(23,24,26,.07);

  /* tipografía */
  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --t-xs: 11.5px; --t-s: 12.5px; --t-m: 14px; --t-l: 16px; --t-xl: 21px; --t-xxl: 30px;

  /* espaciado */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 22px; --e6: 30px;

  --foco: 0 0 0 3px rgba(184,134,11,.32);
  --toque: 44px;   /* área mínima de toque en móvil */
}
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }