@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Orbitron:wght@600;800&display=swap');


/* =========================================
   VRChatCustom 2.0
   Global Design Variables
========================================= */


:root {


/* ===============================
   BACKGROUND COLORS
================================ */


--bg-primary: #070912;

--bg-secondary: #0D1220;

--bg-tertiary: #111827;



/* ===============================
   CARD COLORS
================================ */


--card-bg: rgba(17,24,39,0.75);

--card-hover: rgba(20,30,50,0.95);



/* ===============================
   GLASS EFFECT
================================ */


--glass-bg: rgba(255,255,255,0.05);

--glass-border: rgba(255,255,255,0.08);



/* ===============================
   BRAND COLORS
================================ */


--primary: #00F5D4;

--secondary: #00FFA3;

--accent: #8B5CF6;

--premium: #FFD166;



/* ===============================
   TEXT COLORS
================================ */


--text-primary: #FFFFFF;

--text-secondary: #A7B0C0;

--text-muted: #667085;



/* ===============================
   BORDER COLORS
================================ */


--border: rgba(255,255,255,0.08);

--border-hover: rgba(0,245,212,0.35);



/* ===============================
   BUTTON COLORS
================================ */


--button-primary:

linear-gradient(
135deg,
#00F5D4,
#00FFA3
);


--button-secondary:

rgba(255,255,255,0.06);



/* ===============================
   GRADIENTS
================================ */


--hero-gradient:

radial-gradient(
circle at top left,
rgba(0,245,212,0.18),
transparent 40%
);



--purple-gradient:

radial-gradient(
circle,
rgba(139,92,246,0.20),
transparent 45%
);



/* ===============================
   SHADOWS
================================ */


--shadow-small:

0 5px 20px rgba(0,0,0,0.25);



--shadow-medium:

0 15px 40px rgba(0,0,0,0.35);



--shadow-glow:

0 0 30px rgba(0,245,212,0.25);



/* ===============================
   BORDER RADIUS
================================ */


--radius-small: 10px;

--radius-medium: 18px;

--radius-large: 28px;

--radius-full: 999px;



/* ===============================
   SPACING
================================ */


--container-width: 1400px;

--section-space: 120px;



/* ===============================
   FONT
================================ */


--font-main: 'Inter', sans-serif;

--font-title: 'Orbitron', sans-serif;



/* ===============================
   TRANSITIONS
================================ */


--transition-fast: 0.2s ease;

--transition-normal: 0.35s ease;

--transition-slow: 0.6s ease;



/* ===============================
   Z INDEX
================================ */


--z-background: -1;

--z-normal: 1;

--z-navbar: 100;

--z-modal: 1000;



}



/* =========================================
   FONT HELPERS
========================================= */


body{

font-family: var(--font-main);

}


.mod-title{

font-family: var(--font-title);

}