:root {

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

--cls-primary: #6C5CE7;
--cls-primary-hover: #5A4BD6;
--cls-secondary: #A29BFE;
--cls-accent: #7C3AED;
--cls-danger: #EF4444;


/* ======================================================
🌐 SURFACES
====================================================== */

--cls-bg: red;
--cls-surface: rgba(255,255,255,0.82);
--cls-surface-solid: #FFFFFF;
--cls-card-bg-color: #FFFFFF;


/* ======================================================
🪟 GLASS
====================================================== */

--cls-glass-bg: rgba(255,255,255,0.68);
--cls-glass-border: rgba(255,255,255,0.45);
--cls-glass-blur: 18px;


/* ======================================================
✍️ TYPOGRAPHY
====================================================== */

--cls-text: #111827;
--cls-text-soft: #6B7280;
--cls-text-muted: #9CA3AF;

--cls-heading-weight: 700;
--cls-body-weight: 500;

--cls-font: Inter, system-ui, sans-serif;


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

--cls-space-xs: 4px;
--cls-space-sm: 8px;
--cls-space-md: 14px;
--cls-space-lg: 20px;
--cls-space-xl: 28px;
--cls-space-2xl: 40px;


/* ======================================================
🔲 RADIUS
====================================================== */

--cls-radius-sm: 10px;
--cls-radius-md: 16px;
--cls-radius-lg: 22px;
--cls-radius-xl: 28px;


/* ======================================================
🌑 SHADOW
====================================================== */

--cls-shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
--cls-shadow-md: 0 8px 24px rgba(15,23,42,0.08);
--cls-shadow-lg: 0 16px 40px rgba(15,23,42,0.12);
--cls-shadow-xl: 0 24px 60px rgba(15,23,42,0.16);


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

--cls-transition-fast: 0.18s ease;
--cls-transition-normal: 0.3s ease;
--cls-transition-slow: 0.45s ease;


/* ======================================================
📦 INPUTS
====================================================== */

--cls-input-height: 56px;
--cls-input-padding-x: 18px;

--cls-input-radius: 16px;
--cls-input-border: 1px solid rgba(203,213,225,0.8);
--cls-input-bg: rgba(255,255,255,0.92);

--cls-input-hover-border: rgba(108,92,231,0.28);
--cls-input-focus-border: rgba(108,92,231,0.5);
--cls-input-focus-shadow: 0 0 0 4px rgba(108,92,231,0.08);


/* ======================================================
🔘 BUTTONS
====================================================== */

--cls-btn-height: 56px;
--cls-btn-radius: 20px;

--cls-btn-padding-x: 28px;
--cls-btn-gap: 10px;

--cls-btn-gradient-start: #4f6bff;
--cls-btn-gradient-end: #7a5cff;

--cls-btn-hover-bg: #3b57f4;

--cls-btn-font-size: 15px;
--cls-btn-font-weight: 700;

--cls-btn-shadow: 0 12px 24px rgba(79,107,255,0.24);
--cls-btn-shadow-hover: 0 18px 36px rgba(79,107,255,0.32);


/* ======================================================
📦 CARDS
====================================================== */

--cls-card-padding: 22px;
--cls-card-radius: 22px;
--cls-card-border: 1px solid rgba(226,232,240,0.8);
--cls-card-shadow: 0 4px 20px rgba(15,23,42,0.05);


/* ======================================================
📚 Z-INDEX
====================================================== */

--cls-z-dropdown: 1000;
--cls-z-modal: 999999;
--cls-z-toast: 9999999;

}