/* ======================================================
   VARIABLES — HOMEGYM ARACENA (FINAL DEFINITIVO)
   Design Tokens Globales
   Desktop · Android · iOS
====================================================== */

:root{

  /* ======================================================
     COLORES BASE (FONDOS)
  ====================================================== */
  --bg:#000000;               /* Fondo principal */
  --bg-2:#070707;             /* Secciones */
  --bg-3:#0b0b0b;             /* Cards / bloques */
  --bg-glass:rgba(0,0,0,.72); /* Header / overlays */

  /* ======================================================
     CARDS
  ====================================================== */
  --card:#101010;
  --card-soft:#151515;

  /* ======================================================
     TEXTO
  ====================================================== */
  --text:#ffffff;
  --text-soft:rgba(255,255,255,.9);
  --muted:rgba(255,255,255,.75);
  --muted-soft:rgba(255,255,255,.6);

  /* ======================================================
     COLOR MARCA
  ====================================================== */
  --orange:#ff8a00;
  --orange-2:#ffb347;
  --orange-dark:#d66f00;

  /* ======================================================
     RADIOS
  ====================================================== */
  --radius-xs:12px;
  --radius-sm:16px;
  --radius:22px;
  --radius-lg:28px;
  --radius-pill:999px;

  /* ======================================================
     SOMBRAS
  ====================================================== */
  --shadow:0 18px 55px rgba(0,0,0,.65);
  --shadow-soft:0 12px 34px rgba(0,0,0,.55);
  --shadow-strong:0 28px 85px rgba(0,0,0,.85);

  /* ======================================================
     BORDES
  ====================================================== */
  --border:1px solid rgba(255,255,255,.10);
  --border-soft:1px solid rgba(255,255,255,.06);
  --border-orange:1px solid rgba(255,138,0,.30);

  /* ======================================================
     EFECTOS NEON
  ====================================================== */
  --neon-glow:0 0 14px rgba(255,138,0,.8);
  --neon-glow-strong:0 0 26px rgba(255,138,0,.9);

  /* ======================================================
     OVERLAYS
  ====================================================== */
  --overlay:
    linear-gradient(
      180deg,
      rgba(0,0,0,.85) 0%,
      rgba(0,0,0,.65) 60%,
      rgba(0,0,0,.9) 100%
    );

  /* ======================================================
     TIPOGRAFÍA
  ====================================================== */
  --font:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Ubuntu,
    Cantarell,
    Arial,
    sans-serif;

  /* ======================================================
     LAYOUT
  ====================================================== */
  --container:1200px;
  --container-padding:clamp(16px, 4vw, 32px);

  /* ======================================================
     TRANSICIONES
  ====================================================== */
  --ease:0.3s ease;
  --ease-slow:0.45s cubic-bezier(.22,.61,.36,1);

  /* ======================================================
     Z-INDEX SYSTEM
  ====================================================== */
  --z-overlay:10;
  --z-content:2;
  --z-header:100;
  --z-modal:500;
  --z-float:999;
}