:root {
    /* Brand */

    --blue: #3b82f6;
    --blue-dark: #2563eb;

    --cyan: #06b6d4;

    --orange: #f97316;
    --yellow: #facc15;

    /* Backgrounds */

    --navy: #0f172a;

    --bg-primary: #0f172a;

    --bg-secondary: #111827;

    /* Cards */

    --card-bg: rgba(255, 255, 255, 0.04);

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

    /* Text */

    --text-primary: #ffffff;

    --text-secondary: #94a3b8;

    /* Grays */

    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;

    /* Success */

    --success: #10b981;

    /* Error */

    --danger: #ef4444;

    /* Radius */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Shadow */

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}