/* ============================================
   Base — Global Typography & Body
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Lato:wght@300;400;700&display=swap');

body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    color: var(--color-dark);
    background-color: var(--color-accent);
    line-height: var(--lh-base);
    font-size: var(--fs-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--color-gray);
}

a {
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-secondary);
}

::selection {
    background-color: var(--color-secondary);
    color: var(--color-accent);
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-light-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ============================================
   Custom Mouse Follower
   ============================================ */
/* @media (pointer: fine) {
    /* Hide default cursor universally but keep text selection cursor
    body, a, button, .btn, select, label {
        cursor: none !important;
    }
    
    input, textarea {
        cursor: text !important;
    }

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

    .cursor-dot {
        width: 8px;
        height: 8px;
        background-color: var(--color-secondary);
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

    .cursor-outline {
        width: 40px;
        height: 40px;
        border: 1.5px solid var(--color-secondary);
        transition: width 0.2s ease-in-out, height 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }

    /* Hover States for Links and Buttons
    .cursor-dot.cursor-hover {
        opacity: 0; /* Hide the inner dot to make it sleek 
    }

    .cursor-outline.cursor-hover {
        width: 60px;
        height: 60px;
        background-color: rgba(212, 151, 46, 0.1); /* Slight tint of secondary color 
        border-color: rgba(212, 151, 46, 0.7);
    }
} */