:root{

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

    --cc-primary:#22d3ee;
    --cc-primary-light:#38dfff;
    --cc-primary-dark:#1498cc;

    --cc-bg:#05080d;
    --cc-surface:#091018;
    --cc-surface-light:#111827;

    --cc-border:#1e293b;

    --cc-text:#ffffff;
    --cc-text-muted:#94a3b8;

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

    /* ======================================================
       TYPOGRAPHY
       ====================================================== */

    --cc-font:"Inter",sans-serif;

    --cc-text-xs:.75rem;
    --cc-text-sm:.875rem;
    --cc-text-md:1rem;
    --cc-text-lg:1.125rem;
    --cc-text-xl:1.5rem;
    --cc-text-2xl:2rem;
    --cc-text-3xl:2.5rem;

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

    --cc-space-1:4px;
    --cc-space-2:8px;
    --cc-space-3:12px;
    --cc-space-4:16px;
    --cc-space-5:20px;
    --cc-space-6:24px;
    --cc-space-8:32px;
    --cc-space-10:40px;

    /* ======================================================
       BORDERS
       ====================================================== */

    --cc-radius-sm:8px;
    --cc-radius-md:12px;
    --cc-radius-lg:16px;
    --cc-radius-xl:20px;

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

    --cc-shadow:

        0 20px 60px rgba(0,0,0,.45);

    --cc-glow:

        0 0 25px rgba(34,211,238,.18);

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

    --cc-transition:.22s ease;

}