/* Custom Cursor Styles */
@media (hover: hover) and (pointer: fine) {
    body {
        cursor: none;
        /* Hide default cursor */
    }

    .cursor-dot,
    .cursor-outline {
        position: fixed;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: 9999;
        pointer-events: none;
    }

    .cursor-dot {
        width: 8px;
        height: 8px;
        background-color: #2563EB;
        /* Brand color */
        transition: width 0.2s, height 0.2s, background-color 0.2s;
    }

    .cursor-outline {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(37, 99, 235, 0.5);
        /* Brand color transparent */
        transition: width 0.2s, height 0.2s, border-color 0.2s, background-color 0.2s, transform 0.1s;
    }

    /* Hover States */
    body.hovering .cursor-dot {
        width: 12px;
        height: 12px;
        background-color: #1d4ed8;
    }

    body.hovering .cursor-outline {
        width: 60px;
        height: 60px;
        border-color: transparent;
        background-color: rgba(37, 99, 235, 0.1);
    }

    /* Dark Mode Adjustments */
    .dark .cursor-dot {
        background-color: #60a5fa;
    }

    .dark .cursor-outline {
        border-color: rgba(96, 165, 250, 0.5);
    }

    .dark body.hovering .cursor-dot {
        background-color: #93c5fd;
    }

    .dark body.hovering .cursor-outline {
        background-color: rgba(96, 165, 250, 0.15);
    }
}