:root {

    /* ========= Colors ========= */

    --color-primary: #6366f1;
    --color-secondary: #8b5cf6;
    --color-accent: #06b6d4;

    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* ========= Dark Theme (Default) ========= */

    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-surface-hover: #334155;

    --color-text: #f8fafc;
    --color-text-secondary: #cbd5e1;

    --color-border: #334155;

    /* ========= Typography ========= */

    --font-heading: "Poppins", sans-serif;
    --font-body: "Inter", sans-serif;

    /* ========= Border Radius ========= */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* ========= Shadows ========= */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.40);

    /* ========= Transition ========= */

    --transition: all .3s ease;

    /* ========= Layout ========= */

    --container-width: 1200px;
}