/* CSS Variables */
:root {
    /* Colors */
    --color-bg: #000000;
    --color-bg-secondary: #16181c;
    --color-bg-tertiary: #202327;
    --color-text: #ffffff;
    --color-text-secondary: #71767b;
    --color-border: #2f3336;
    --color-primary: #1d9bf0;
    --color-primary-hover: #1a8cd8;
    --color-success: #00ba7c;
    --color-danger: #f4212e;
    --color-warning: #ffd400;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Font sizes */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Layout */
    --max-width: 1280px;
    --sidebar-width: 275px;
    --sidebar-right-width: 350px;
    --content-width: 600px;

    /* Bootstrap-style Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}