/* =========================
   ROOT VARIABLES
========================= */

:root {

    /* BACKGROUND COLORS */

    --bg-primary: #0f172a;
    --bg-secondary: #111827;
    --bg-tertiary: #1e293b;

    /* GLASS EFFECT */

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

    /* TEXT COLORS */

    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* PRIMARY COLORS */

    --blue: #3b82f6;
    --purple: #8b5cf6;
    --cyan: #06b6d4;
    --green: #22c55e;
    --red: #ef4444;
    --orange: #f97316;
    --yellow: #facc15;

    /* GRADIENTS */

    --primary-gradient:
        linear-gradient(
            135deg,
            #3b82f6,
            #8b5cf6
        );

    --success-gradient:
        linear-gradient(
            135deg,
            #22c55e,
            #06b6d4
        );

    --danger-gradient:
        linear-gradient(
            135deg,
            #ef4444,
            #dc2626
        );

    /* SHADOWS */

    --shadow-sm:
        0 4px 10px rgba(0, 0, 0, 0.15);

    --shadow-md:
        0 8px 20px rgba(0, 0, 0, 0.25);

    --shadow-lg:
        0 10px 30px rgba(0, 0, 0, 0.35);

    /* BORDER RADIUS */

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

    /* TRANSITIONS */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* FONT */

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

}