@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --theme-color-foreground: #f3f8fd;
    --theme-color-overlay: rgba(9, 22, 38, 0.38);
    --theme-color-background: #0f2238;
    --theme-color-link: #bfe3e6;
    --theme-color-accent: #f0a83f;
    --theme-color-ring-accent: #bfe3e6;
    --theme-color-dialog-bg: rgba(12, 26, 42, 0.72);
    --theme-color-button-bg: rgba(18, 42, 64, 0.38);
    --theme-color-button-hover-bg: rgba(24, 56, 82, 0.55);
    --theme-color-button-active-bg: rgba(240, 168, 63, 0.28);
    --theme-font-family: 'Manrope', sans-serif;
    --theme-bg-image: url("/themes/winter/background.jpg");

    --font-display: 'Quicksand', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --shadow-rgb: 0, 0, 0;
    --shadow-low: 0 8px 20px -10px rgba(var(--shadow-rgb), .28);
    --shadow-mid: 0 20px 45px -18px rgba(var(--shadow-rgb), .32);
    --shadow-high: 0 32px 70px -24px rgba(var(--shadow-rgb), .38);

    --brand-accent-timer: #ff66c4;
}