/* ===========================
   CaribeXCOM — Design Tokens
   Archivo: cx-tokens.css
   =========================== */

:root{
  /* Brand (Manual CaribeXCOM) */
  --cx-red: #DE0011;
  --cx-green: #006D00;
  --cx-yellow: #FDD703;
  --cx-orange: #F1931C;
  --cx-gray: #3F3F3F;

  /* Neutrals (UI tech / industrial) */
  --bg: #0B0F14;
  --bg-2: #070A0E;
  --panel: #121826;
  --panel-2: #0F1521;
  --text: #E8EEF7;
  --muted: rgba(232,238,247,.72);
  --muted-2: rgba(232,238,247,.55);
  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.06);

  /* Gradients */
  --grad-brand: linear-gradient(90deg, var(--cx-yellow) 0%, var(--cx-orange) 45%, var(--cx-red) 100%);
  --grad-tech: linear-gradient(90deg, var(--cx-green) 0%, var(--cx-yellow) 100%);
  --grad-panel: radial-gradient(1200px 600px at 15% 10%, rgba(253,215,3,.10), transparent 60%),
                radial-gradient(1200px 700px at 85% 20%, rgba(222,0,17,.08), transparent 55%),
                radial-gradient(900px 600px at 50% 90%, rgba(0,109,0,.07), transparent 60%);

  /* Shadows / glows */
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.25);
  --glow-yellow: 0 0 18px rgba(253,215,3,.35);
  --glow-red: 0 0 18px rgba(222,0,17,.25);
  --glow-green: 0 0 18px rgba(0,109,0,.25);

  /* Radius */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Spacing */
  --container: 1180px;
  --gutter: 20px;
  --section-pad: 84px;

  /* Typography */
  --font-body: "Montserrat", Arial, sans-serif;
  --font-title: "Montserrat", Arial, sans-serif; /* Puedes cambiar a Lemon Milk si la agregas */
  --font-impact: "Lemon Milk", "Montserrat", Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-1: 160ms;
  --t-2: 240ms;
  --t-3: 400ms;

  /* Z-index */
  --z-nav: 1000;
  --z-loader: 2000;
  --z-modal: 3000;

  /* Navbar height */
  --nav-h: 72px;
}

/* Soporte: reduce motion */
@media (prefers-reduced-motion: reduce){
  :root{
    --t-1: 1ms;
    --t-2: 1ms;
    --t-3: 1ms;
  }
}