/* variables.css */

:root {
  /* ─────────── Paleta de Colores ─────────── */
  --primary: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
  --primary-solid: #ffd700;
  --secondary: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  --accent: #ffd700;
  --success: #00ff88;
  --danger: #ff4757;
  --warning: #ffa502;

  /* Tonos de oro */
  --gold: #ffd700;
  --gold-light: #ffed4e;
  --gold-dark: #b8860b;

  /* Escalas de gris y negro */
  --black: #000000;
  --black-light: #1a1a1a;
  --black-medium: #2d2d2d;
  --black-dark: #0a0a0a;
  --gray-50:  #f8f8f8;
  --gray-100: #e8e8e8;
  --gray-200: #d8d8d8;
  --gray-300: #b8b8b8;
  --gray-400: #888888;
  --gray-500: #666666;
  --gray-600: #4a4a4a;
  --gray-700: #2a2a2a;
  --gray-800: #1a1a1a;
  --gray-900: #0a0a0a;

  /* ─────────── Sombras ─────────── */
  --shadow-sm:   0 1px  2px   0 rgb(255 215 0 / 0.1);
  --shadow:      0 1px  3px   0 rgb(255 215 0 / 0.2),
                  0 1px  2px  -1px rgb(255 215 0 / 0.1);
  --shadow-md:   0 4px  6px  -1px rgb(255 215 0 / 0.2),
                  0 2px  4px  -2px rgb(255 215 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(255 215 0 / 0.3),
                  0 4px   6px  -4px rgb(255 215 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px rgb(255 215 0 / 0.3),
                  0 8px  10px  -6px rgb(255 215 0 / 0.1);
  --shadow-2xl:  0 25px 50px -12px rgb(255 215 0 / 0.4);
  --shadow-gold: 0   0px 20px       rgb(255 215 0 / 0.5);

  /* ─────────── Desenfoques (Blurs) ─────────── */
  --blur-sm:  4px;
  --blur-md: 12px;
  --blur-lg: 16px;
}