:root {
  /* Original WordPress colors */
  --blanco: #ffffff;
  --celeste: #edf5ff;
  --azul: #0a7afa;
  --brillo1: #f2f6ff;
  --brillo2: #abb6cc33;
  --separador: #cbe5ff;
  --negro: #000000;
  --negro2: #23233c;
  --rojo: #ed0000;
  --gris-claro1: #7f8da0;
  --gris-claro2: #bfbfbf;
  --gris-claro3: #02449133;
  --gris-oscuro: #5d5d5d;

  /* Legacy color aliases */
  --blue: #0f87ff;
  --blue2: #44a2ff;

  /* Surface & text */
  --surface: #ffffff;
  --surface-hover: #f2f6ff;
  --text-on-primary: #ffffff;
  --text-inverse: #000000;

  /* Interactive */
  --link-hover: #004ea7;
  --btn-primary-hover: #0968d2;
  --focus-ring: rgba(10, 122, 250, 0.12);
  --active-ring: rgba(10, 122, 250, 0.2);

  /* Overlay & borders */
  --overlay: rgba(0, 0, 0, 0.5);
  --border-muted: #b4b4b4;

  /* Status */
  --success: #34C759;
  --heart-color: #ed0000;
  --heart-bg: lightgrey;

  /* Decorative */
  --badge-gradient: linear-gradient(135deg, #5856D6, #0a7afa);
  --shadow-item: 0 2px 8px rgb(0 0 0 / 14%), 0 0 1px rgb(0 0 0 / 20%);

  /* Systematic shadows */
  --shadow-sm: 0 1px 3px rgba(171, 182, 204, 0.12);
  --shadow-md: 0 4px 16px rgba(171, 182, 204, 0.16);
  --shadow-lg: 50px 50px 50px rgba(171, 182, 204, 0.2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index scale */
  --z-dropdown: 96;
  --z-header: 98;
  --z-overlay: 97;
  --z-sidemenu: 100;
  --z-footer: 101;
  --z-toast: 500;

  /* Layout */
  --max-width: 1110px;
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 26px;
}

/* ===== Dark theme ===== */
[data-theme="dark"] {
  --blanco: #1a1a2e;
  --celeste: #0f0f1a;
  --azul: #4da6ff;
  --brillo1: #1e1e32;
  --brillo2: rgba(30, 30, 50, 0.3);
  --separador: #2a2a45;
  --negro: #ffffff;
  --negro2: #e0e0e8;
  --rojo: #ff4444;
  --gris-claro1: #8888a0;
  --gris-claro2: #555570;
  --gris-claro3: rgba(100, 100, 150, 0.2);
  --gris-oscuro: #a0a0b0;

  --blue: #4da6ff;
  --blue2: #66b3ff;

  --surface: #1e1e32;
  --surface-hover: #252540;
  --text-on-primary: #ffffff;
  --text-inverse: #e0e0e8;
  --link-hover: #66b3ff;
  --btn-primary-hover: #3399ff;
  --focus-ring: rgba(77, 166, 255, 0.2);
  --active-ring: rgba(77, 166, 255, 0.25);
  --overlay: rgba(0, 0, 0, 0.7);
  --border-muted: #444460;
  --success: #30D158;
  --heart-color: #ff4466;
  --heart-bg: #444460;
  --badge-gradient: linear-gradient(135deg, #7B78F2, #4da6ff);
  --shadow-item: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 50px 50px 50px rgba(0, 0, 0, 0.3);
}