/* ===================================================
   AUTÉNTICO CREATIVO — THEMES
   Dark mode único y predeterminado
   =================================================== */

:root {
  /* ── Colores de marca ── */
  --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);

  /* ── Tipografía ── */
  --font-title:   'Bebas Neue', sans-serif;
  --font-body:    'Montserrat Alternates', sans-serif;

  /* ── Radios ── */
  --r:            14px;
  --r-lg:         24px;
  --r-xl:         40px;
  --r-full:       999px;

  /* ── Transiciones ── */
  --transition:      0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Fondo y superficies ── */
  --bg:             #0c0c0c;
  --bg-alt:         #141414;
  --bg-card:        #181818;
  --surface:        #222222;

  /* ── Bordes ── */
  --border:         rgba(255, 255, 255, 0.09);
  --border-strong:  rgba(255, 255, 255, 0.18);

  /* ── Texto ── */
  --text:           #f0f0f0;
  --text-muted:     #888888;
  --text-dim:       rgba(255, 255, 255, 0.30);

  /* ── Efectos ── */
  --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;
}