@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Nunito:wght@300;400;500;600;700;800&display=swap');

:root {
    --color-red: rgb(173, 29, 30);
    --color-orange: rgb(255, 141, 40);
    --color-yellow: rgb(255, 204, 0);
    --color-green: rgb(52, 199, 89);
    --color-mint: rgb(0, 200, 179);
    --color-teal: rgb(0, 195, 208);
    --color-cyan: rgb(0, 192, 232);
    --color-blue: rgb(0, 136, 255);
    --color-indigo: rgb(97, 85, 245);
    --color-purple: rgb(203, 48, 224);
    --color-pink: rgb(255, 45, 85);
    --color-brown: rgb(172, 127, 94);
    --color-gray1: rgb(248, 248, 248);
    --color-gray2: rgb(228, 228, 228);
    --color-gray3: rgb(210, 210, 210);
    --color-gray4: rgb(190, 190, 190);
    --color-gray5: rgb(170, 170, 170);
    --color-gray6: rgb(142, 142, 142);
    --color-gray7: rgb(107, 107, 107);
    --color-gray8: rgb(87, 87, 87);
    --color-gray9: rgb(67, 67, 67);
    --color-gray10: rgb(47, 47, 47);
    --color-gray11: rgb(27, 27, 27);
    --color-gray12: rgb(7, 7, 7);

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 48px;
    --spacing-4xl: 56px;
    --spacing-5xl: 64px;

    --border-radius-none: 0px;
    --border-radius-item-xs: 4px;
    --border-radius-item-sm: 8px;
    --border-radius-item-md: 12px;
    --border-radius-item-lg: 16px;
    --border-radius-item-xl: 20px;
    --border-radius-container-xs: 24px;
    --border-radius-container-sm: 32px;
    --border-radius-container-md: 40px;
    --border-radius-container-lg: 48px;
    --border-radius-container-xl: 56px;
    --border-radius-pill: 9999px;

    --border-width-none: 0px;
    --border-width-hairline: 0.5px;
    --border-width-thin: 1px;
    --border-width-normal: 2px;
    --border-width-thick: 4px;

    --elevation-0: 0 0 0 0 color-mix(in srgb, var(--color-gray12) 0%, transparent);
    --elevation-1: 0 1px 3px 0 color-mix(in srgb, var(--color-gray12) 8%, transparent);
    --elevation-2: 0 3px 6px 0 color-mix(in srgb, var(--color-gray12) 12%, transparent);
    --elevation-3: 0 6px 12px 0 color-mix(in srgb, var(--color-gray12) 16%, transparent);
    --elevation-4: 0 10px 20px 0 color-mix(in srgb, var(--color-gray12) 20%, transparent);

    --font-family-inter: 'Inter', sans-serif;
    --font-family-nunito: 'Nunito', sans-serif;
    --font-family-base: var(--font-family-nunito);
    --font-family-variable: var(--font-family-inter);

    --accent-dark: rgb(0, 100, 210);
    --accent-glow: color-mix(in srgb, var(--color-blue) 15%, transparent);
}

/* Font definitions */
h1, h2 {
    font-family: var(--font-family-inter), sans-serif;
}

h3, h4, h5, h6, p, span, div, li, a, button, input, textarea, select {
    font-family: var(--font-family-nunito), sans-serif;
}

/* ── Custom scrollbar ── */

/* 1. Standard rules ONLY for Firefox */
@supports (-moz-appearance: none) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--color-gray4) transparent;
    }
}

/* 2. WebKit rules for Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Invisible track with top/bottom padding */
::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 9px; /* Adds padding to the top and bottom */
    margin-inline: 9px; /* Adds padding to the left and right (for horizontal scrollbars) */
}

/* Floating pill thumb */
::-webkit-scrollbar-thumb {
    background-color: var(--color-gray4);
    border-radius: var(--border-radius-pill);
    border: 3px solid transparent; /* Invisible padding around the thumb */
    background-clip: content-box;
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray6);
}

/* Explicitly disable the arrows/buttons in WebKit */
::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}