/* =========================================================================
   Monster Evolution Defense — Design tokens
   Identidad propia: sci-fi militar futurista. Azul / Morado / Verde neón /
   Negro / Blanco. Todo el look premium sale de aquí.
   ========================================================================= */
:root{
  /* --- Marca --- */
  --c-blue:        #2E6BFF;
  --c-blue-dim:    #1B3E9E;
  --c-blue-glow:   #6BA0FF;
  --c-purple:      #8B5CF6;
  --c-purple-dim:  #4C2A8F;
  --c-purple-glow: #C4A6FF;
  --c-neon:        #39FF88;
  --c-neon-dim:    #12A455;
  --c-neon-glow:   #A8FFCB;
  --c-black:       #05070F;
  --c-white:       #F2F6FF;

  /* --- Superficies --- */
  --bg-0:  #05070F;
  --bg-1:  #0A0E1C;
  --bg-2:  #111832;
  --bg-3:  #1A2244;
  --panel:      rgba(17, 24, 50, .72);
  --panel-soft: rgba(26, 34, 68, .55);
  --glass:      rgba(255,255,255,.045);
  --stroke:     rgba(139,146,255,.22);
  --stroke-hot: rgba(57,255,136,.45);

  /* --- Texto --- */
  --tx-hi:  #F2F6FF;
  --tx-mid: #A9B4D9;
  --tx-lo:  #6C77A0;

  /* --- Semántica --- */
  --ok:    #39FF88;
  --warn:  #FFC53D;
  --bad:   #FF4D6D;
  --gold:  #FFD34E;
  --gem:   #55E6FF;

  /* --- Rarezas --- */
  --r-common:    #8A97B8;
  --r-rare:      #34A8FF;
  --r-epic:      #A855F7;
  --r-legendary: #FFB020;
  --r-mythic:    #FF3D7F;

  /* --- Gradientes --- */
  --g-primary:  linear-gradient(135deg, #2E6BFF 0%, #8B5CF6 100%);
  --g-action:   linear-gradient(135deg, #12A455 0%, #39FF88 100%);
  --g-premium:  linear-gradient(135deg, #FF8A00 0%, #FFD34E 50%, #FF3D7F 100%);
  --g-panel:    linear-gradient(160deg, rgba(46,107,255,.16), rgba(139,92,246,.10) 55%, rgba(5,7,15,0) 100%);
  --g-danger:   linear-gradient(135deg, #B3123E 0%, #FF4D6D 100%);

  /* --- Sombras / glow --- */
  --sh-1: 0 2px 10px rgba(0,0,0,.45);
  --sh-2: 0 8px 28px rgba(0,0,0,.55);
  --sh-3: 0 18px 60px rgba(0,0,0,.65);
  --glow-blue:   0 0 18px rgba(46,107,255,.55);
  --glow-purple: 0 0 18px rgba(139,92,246,.55);
  --glow-neon:   0 0 20px rgba(57,255,136,.55);

  /* --- Métricas --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --topbar-h: 52px;
  --subbar-h: 34px;
  --nav-h: 66px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* --- Tipografía --- */
  --f-ui: "Rajdhani", "Segoe UI", "Roboto Condensed", system-ui, sans-serif;
  --f-num: "Rajdhani", "Segoe UI", ui-monospace, monospace;

  /* --- Timing --- */
  --t-fast: 120ms;
  --t-mid: 240ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
}