@font-face {
    font-family: 'Quicksand';
    src: url('/uploads/Quicksand-VariableFont_wght.woff2') format('woff2'),
         url('/uploads/Quicksand-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --mint: #71ffcc;
    --mint-hover: #4ff5bb;
    --mint-deep: #2de8a8;
    --mint-light: #e0fff5;
    --mint-dim: rgba(113, 255, 204, 0.12);
    --mint-dim2: rgba(113, 255, 204, 0.22);
    --slate: #6b7977;
    --slate-dark: #3d4744;
    --slate-light: #9bafab;
    --amber: #ffd166;
    --rose: #ff6b8a;
    --blue: #74b9ff;

    --bg-page: #f2faf7;
    --bg-surface: #ffffff;
    --bg-surface-2: #eaf4ef;
    --bg-sidebar: #141f1c;
    --bg-sidebar-2: #1c2d29;
    --text-primary: #192320;
    --text-secondary: #6b7977;
    --text-muted: #9bafab;
    --border: #dae7e2;
    --border-strong: #b5cbc5;
    --shadow-sm:
        0 1px 3px rgba(20, 50, 40, 0.06), 0 1px 2px rgba(20, 50, 40, 0.03);
    --shadow-md:
        0 4px 16px rgba(20, 50, 40, 0.08), 0 2px 6px rgba(20, 50, 40, 0.04);
    --shadow-lg:
        0 8px 40px rgba(20, 50, 40, 0.1), 0 4px 12px rgba(20, 50, 40, 0.06);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --sidebar-w: 256px;
    --topbar-h: 64px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    background: #0c1614;
    color: #e2f2ec;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #274542;
    border-radius: 10px;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes mintPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(113, 255, 204, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(113, 255, 204, 0);
    }
}
@keyframes blobFloat {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(20px, -30px) scale(1.05);
    }
    66% {
        transform: translate(-15px, 15px) scale(0.97);
    }
}
@keyframes scalePop {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#root {
    min-height: 100vh;
}

/* Responsive: ensure canvas never overflows on narrow screens */
@media (max-width: 639px) {
    canvas {
        max-width: 100%;
    }
}