/* ===================================================
   AUTÉNTICO CREATIVO — THEMES
   Dark mode (default) + Light mode variables
   =================================================== */

/* ── Brand constants (never change with theme) ── */
:root {
  --red:          #d31451;
  --red-hover:    #b80e41;
  --red-glow:     rgba(211, 20, 81, 0.30);

  --teal:         #299cb8;
  --teal-hover:   #1d7d93;
  --teal-glow:    rgba(41, 156, 184, 0.28);

  --font-title:   'Bebas Neue', sans-serif;
  --font-body:    'Montserrat Alternates', sans-serif;

  --r:            14px;
  --r-lg:         24px;
  --r-xl:         40px;
  --r-full:       999px;

  --transition:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── DARK (default) ── */
[data-theme="dark"] {
  --bg:             #0c0c0c;
  --bg-alt:         #141414;
  --bg-card:        #181818;
  --surface:        #222222;

  --border:         rgba(255, 255, 255, 0.09);
  --border-strong:  rgba(255, 255, 255, 0.18);

  --text:           #f0f0f0;
  --text-muted:     #888888;
  --text-dim:       rgba(255, 255, 255, 0.30);

  --nav-glass:      rgba(12, 12, 12, 0.80);
  --hero-grid:      rgba(255, 255, 255, 0.04);
  --outline-stroke: rgba(240, 240, 240, 0.75);
  --mirage:         rgba(255, 255, 255, 0.05);
  --shadow:         rgba(0, 0, 0, 0.55);
  --shadow-card:    rgba(0, 0, 0, 0.40);
  --stat-hover:     #1f1f1f;

  --icon-color:     #c0c0c0;
}

/* ── LIGHT ── */
[data-theme="light"] {
  --bg:             #ffffff;
  --bg-alt:         #f5f5f5;
  --bg-card:        #ffffff;
  --surface:        #ececec;

  --border:         rgba(0, 0, 0, 0.10);
  --border-strong:  rgba(0, 0, 0, 0.20);

  --text:           #0a0a0a;
  --text-muted:     #666666;
  --text-dim:       rgba(0, 0, 0, 0.35);

  --nav-glass:      rgba(255, 255, 255, 0.85);
  --hero-grid:      rgba(0, 0, 0, 0.05);
  --outline-stroke: rgba(10, 10, 10, 0.75);
  --mirage:         rgba(255, 255, 255, 0.65);
  --shadow:         rgba(0, 0, 0, 0.07);
  --shadow-card:    rgba(0, 0, 0, 0.06);
  --stat-hover:     #f0f0f0;

  --icon-color:     #444444;
}