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

:root {
    --cb-bg: #0f1013;
    --cb-bg-soft: #12151a;
    --cb-surface: #15171c;
    --cb-surface-2: #1b1e24;
    --cb-surface-3: #222630;
    --cb-line: #2c303a;
    --cb-text: #f5f6f8;
    --cb-muted: #9da3ad;
    --cb-accent: #ffd45a;
    --cb-accent-2: #7ee59d;
    --cb-danger: #ef6b6b;
    --cb-radius: 10px;
    --cb-radius-sm: 8px;
    --cb-shadow: 0 18px 60px rgba(0, 0, 0, .22);
    --cb-font: Inter, Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--cb-text);
    background:
        radial-gradient(circle at top left, rgba(255, 212, 90, .08), transparent 34rem),
        linear-gradient(180deg, #111318, var(--cb-bg));
    font-family: var(--cb-font);
}

::selection {
    color: #16181d;
    background: var(--cb-accent);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--cb-bg);
}

::-webkit-scrollbar-thumb {
    background: #303541;
    border: 3px solid var(--cb-bg);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #454b59;
}

.cb-card {
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--cb-surface);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius);
    box-shadow: var(--cb-shadow);
}