/* ==========================================================
   HASHVIX DESIGN SYSTEM
   ROOT VARIABLES
   Version 1.0
========================================================== */

:root{

/* ---------------------------------------------------------
   COLORS
--------------------------------------------------------- */

--hx-bg:#05070B;
--hx-surface:#0F1724;
--hx-surface-2:#161F2E;
--hx-surface-3:#1C2636;

--hx-primary:#4F8CFF;
--hx-primary-hover:#3B82F6;

--hx-secondary:#8B5CF6;
--hx-accent:#00D4FF;

--hx-success:#10B981;
--hx-warning:#F59E0B;
--hx-danger:#EF4444;

--hx-white:#FFFFFF;

--hx-text:#F8FAFC;
--hx-text-light:#CBD5E1;
--hx-text-muted:#94A3B8;

--hx-border:rgba(255,255,255,.06);

--hx-glass:rgba(255,255,255,.04);
--hx-glass-2:rgba(255,255,255,.07);

/* ---------------------------------------------------------
   GRADIENTS
--------------------------------------------------------- */

--hx-gradient-primary:
linear-gradient(
135deg,
#4F8CFF,
#8B5CF6);

--hx-gradient-secondary:
linear-gradient(
135deg,
#00D4FF,
#4F8CFF);

--hx-gradient-danger:
linear-gradient(
135deg,
#ff416c,
#ff4b2b);

--hx-gradient-dark:
linear-gradient(
180deg,
#0F1724,
#05070B);

/* ---------------------------------------------------------
   SHADOWS
--------------------------------------------------------- */

--hx-shadow-xs:
0 2px 8px rgba(0,0,0,.15);

--hx-shadow-sm:
0 6px 20px rgba(0,0,0,.25);

--hx-shadow:
0 15px 40px rgba(0,0,0,.35);

--hx-shadow-lg:
0 30px 80px rgba(0,0,0,.45);

--hx-shadow-glow:
0 0 35px rgba(79,140,255,.25);

/* ---------------------------------------------------------
   BORDER RADIUS
--------------------------------------------------------- */

--hx-radius-xs:8px;
--hx-radius-sm:12px;
--hx-radius:18px;
--hx-radius-lg:24px;
--hx-radius-xl:30px;
--hx-radius-round:999px;

/* ---------------------------------------------------------
   SPACING
--------------------------------------------------------- */

--hx-space-1:4px;
--hx-space-2:8px;
--hx-space-3:12px;
--hx-space-4:16px;
--hx-space-5:20px;
--hx-space-6:24px;
--hx-space-7:30px;
--hx-space-8:40px;
--hx-space-9:60px;
--hx-space-10:80px;

/* ---------------------------------------------------------
   TRANSITIONS
--------------------------------------------------------- */

--hx-fast:.2s ease;

--hx-normal:.3s ease;

--hx-slow:.45s ease;

/* ---------------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------------- */

--hx-font:
Inter,
"Poppins",
system-ui,
sans-serif;

--hx-h1:52px;
--hx-h2:40px;
--hx-h3:30px;
--hx-h4:24px;
--hx-h5:20px;

--hx-body:16px;
--hx-small:14px;

/* ---------------------------------------------------------
   Z INDEX
--------------------------------------------------------- */

--hx-z-dropdown:500;

--hx-z-modal:900;

--hx-z-player:999;

--hx-z-toast:9999;

/* ---------------------------------------------------------
   PLAYER
--------------------------------------------------------- */

--hx-player-height:88px;

/* ---------------------------------------------------------
   SIDEBAR
--------------------------------------------------------- */

--hx-sidebar-width:280px;

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

--hx-header-height:82px;

/* ---------------------------------------------------------
   CONTAINER
--------------------------------------------------------- */

--hx-container:1450px;

}