/* ============================================================
   VARIABLES — Sistema de Diseño
   Paleta: Negro · Oro · Azul Eléctrico
   ============================================================ */

:root {
  /* ------- TIPOGRAFÍA ------- */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ------- ESCALAS ------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* ------- ESPACIADOS ------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ------- RADIOS ------- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ------- TRANSICIONES ------- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.6s ease;
  --transition-theme:  0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ------- LAYOUT ------- */
  --max-width: 1200px;
  --nav-height: 72px;
}

/* ============================================================
   TEMA OSCURO (default)
   ============================================================ */
[data-theme="dark"] {
  /* Fondos */
  --bg-primary:    #090909;
  --bg-secondary:  #111111;
  --bg-card:       #161616;
  --bg-card-hover: #1e1e1e;
  --bg-overlay:    rgba(0, 0, 0, 0.7);
  --bg-nav:        rgba(9, 9, 9, 0.92);
  --bg-input:      #1a1a1a;

  /* Texto */
  --text-primary:   #f0ece4;
  --text-secondary: #8a8580;
  --text-muted:     #555050;
  --text-inverse:   #0d0d0d;

  /* Acentos principales */
  --gold:         #c9a227;
  --gold-light:   #e8c96e;
  --gold-dark:    #8a6f1a;
  --gold-subtle:  rgba(201, 162, 39, 0.08);
  --gold-border:  rgba(201, 162, 39, 0.22);

  --electric:       #00b4ff;
  --electric-light: #5ed0ff;
  --electric-dark:  #007eb8;
  --electric-subtle: rgba(0, 180, 255, 0.08);
  --electric-border: rgba(0, 180, 255, 0.25);

  /* Bordes y separadores */
  --border:         rgba(255, 255, 255, 0.08);
  --border-accent:  var(--gold-border);

  /* Sombras */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 20px 48px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 24px rgba(201, 162, 39, 0.15);
  --shadow-electric: 0 0 24px rgba(0, 180, 255, 0.2);

  /* Gradientes */
  --gradient-hero: linear-gradient(
    135deg,
    #0a0a0a 0%,
    #0d0f14 50%,
    #090d12 100%
  );
  --gradient-gold: linear-gradient(135deg, var(--gold-dark), var(--gold));
  --gradient-electric: linear-gradient(135deg, var(--electric-dark), var(--electric));
  --gradient-card: linear-gradient(145deg, #161616 0%, #121212 100%);
  --gradient-text-gold: linear-gradient(135deg, var(--gold-light), var(--gold));

  /* Efectos especiales */
  --noise-opacity: 0.03;
  --glow-gold: 0 0 40px rgba(201, 162, 39, 0.2), 0 0 80px rgba(201, 162, 39, 0.05);
  --glow-electric: 0 0 40px rgba(0, 180, 255, 0.25), 0 0 80px rgba(0, 180, 255, 0.08);

  color-scheme: dark;
}

/* ============================================================
   TEMA CLARO
   ============================================================ */
[data-theme="light"] {
  /* Fondos */
  --bg-primary:    #f8f6f1;
  --bg-secondary:  #eeebe3;
  --bg-card:       #ffffff;
  --bg-card-hover: #fafafa;
  --bg-overlay:    rgba(248, 246, 241, 0.9);
  --bg-nav:        rgba(248, 246, 241, 0.92);
  --bg-input:      #ffffff;

  /* Texto */
  --text-primary:   #0d0b08;
  --text-secondary: #5a5550;
  --text-muted:     #9a9590;
  --text-inverse:   #f0ece4;

  /* Acentos */
  --gold:         #8a6d0c;
  --gold-light:   #b8941a;
  --gold-dark:    #5c4808;
  --gold-subtle:  rgba(138, 109, 12, 0.06);
  --gold-border:  rgba(138, 109, 12, 0.2);

  --electric:       #0070a8;
  --electric-light: #0090d4;
  --electric-dark:  #004e78;
  --electric-subtle: rgba(0, 112, 168, 0.06);
  --electric-border: rgba(0, 112, 168, 0.2);

  /* Bordes */
  --border:         rgba(0, 0, 0, 0.08);
  --border-accent:  var(--gold-border);

  /* Sombras */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 20px 48px rgba(0, 0, 0, 0.12);
  --shadow-gold: 0 0 24px rgba(138, 109, 12, 0.1);
  --shadow-electric: 0 0 24px rgba(0, 112, 168, 0.12);

  /* Gradientes */
  --gradient-hero: linear-gradient(
    135deg,
    #f5f2ec 0%,
    #ede9e0 50%,
    #f0ece3 100%
  );
  --gradient-gold: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  --gradient-electric: linear-gradient(135deg, var(--electric-dark), var(--electric));
  --gradient-card: linear-gradient(145deg, #ffffff 0%, #fafaf8 100%);
  --gradient-text-gold: linear-gradient(135deg, var(--gold), var(--gold-light));

  --noise-opacity: 0.02;
  --glow-gold: 0 0 40px rgba(138, 109, 12, 0.1), 0 0 80px rgba(138, 109, 12, 0.03);
  --glow-electric: 0 0 40px rgba(0, 112, 168, 0.12), 0 0 80px rgba(0, 112, 168, 0.04);

  color-scheme: light;
}