@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --color-primary: #0088cc;
    --color-primary-dark: #006699;
    --color-primary-light: rgba(0, 136, 204, 0.12);
    --color-primary-glow: rgba(0, 136, 204, 0.25);
    --color-accent: #f59e0b;
    --color-accent-light: rgba(245, 158, 11, 0.15);

    --color-bg: #1e1e1e;
    --color-bg-alt: #252525;
    --color-bg-card: #2f3136;
    --color-bg-dark: #0a0a0a;
    --color-bg-elevated: #36393f;

    --color-text: #e8e8e8;
    --color-text-secondary: #999;
    --color-text-light: #666;
    --color-text-inverse: #0a0a0a;

    --color-border: #404040;
    --color-border-light: #363636;

    --color-signal: #0088cc;
    --color-signal-faded: rgba(0, 136, 204, 0.08);

    --color-success: #43b581;
    --color-warning: #faa61a;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.4);
    --shadow-signal: 0 4px 24px rgba(0, 136, 204, 0.2);
    --shadow-signal-lg: 0 8px 40px rgba(0, 136, 204, 0.3);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;

    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --max-width: 1200px;
    --header-height: 76px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: #33aaff; }

ul { list-style: none; }

::selection {
    background: var(--color-primary);
    color: white;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Hide scrollbar for animations */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }