:root {
    --bg-base:        #0a0e1a;
    --bg-surface:     #131a2b;
    --bg-elevated:    #1c2438;
    --bg-input:       #1a2236;
    --bg-hover:       #1f2940;
    --bg-row-even:    #131a2b;
    --bg-row-odd:     #161e30;
    --bg-overlay:     rgba(10, 14, 26, 0.85);

    --text-primary:   #e8edf5;
    --text-secondary: #a4b1c8;
    --text-tertiary:  #6b7896;
    --text-muted:     #4a5878;
    --text-link:      #6ba3ff;
    --text-on-accent: #ffffff;

    --accent-primary: #4f8cf7;
    --accent-hover:   #6ba3ff;
    --accent-pressed: #3a72d8;
    --accent-soft:    rgba(79, 140, 247, 0.12);
    --accent-ring:    rgba(79, 140, 247, 0.35);

    --success:        #3ec483;
    --success-bg:     rgba(62, 196, 131, 0.12);
    --success-ring:   rgba(62, 196, 131, 0.35);
    --warning:        #f5c451;
    --warning-bg:     rgba(245, 196, 81, 0.12);
    --warning-ring:   rgba(245, 196, 81, 0.35);
    --danger:         #f57b7b;
    --danger-bg:      rgba(245, 123, 123, 0.12);
    --danger-ring:    rgba(245, 123, 123, 0.35);
    --info:           #6ba3ff;
    --info-bg:        rgba(107, 163, 255, 0.12);

    --border-subtle:  #1f2940;
    --border-default: #2a3756;
    --border-strong:  #3a4a70;
    --border-accent:  rgba(79, 140, 247, 0.5);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 3px var(--accent-ring);

    --font-sans: -apple-system, "SF Pro Text", "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", Menlo, Monaco, Consolas, "Roboto Mono", monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;
    --text-4xl:  3rem;

    --leading-tight:  1.25;
    --leading-snug:   1.35;
    --leading-normal: 1.5;
    --leading-loose:  1.7;

    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
    --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
    --space-8: 32px;  --space-10: 40px; --space-12: 48px;
    --space-16: 64px; --space-20: 80px;

    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 9999px;

    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-w: 240px;
    --topbar-h:  64px;
}

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

html {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
}

*:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid var(--bg-base); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-hover); }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}