/* ============================================================================
   ZOLDEA DESIGN SYSTEM — Design Tokens & Foundation
   ============================================================================
   Premium dark-first design system with glassmorphism aesthetics.
   All visual decisions flow from these tokens.
   ============================================================================ */

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

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

/* --------------------------------------------------------------------------
   Design Tokens — Dark Theme (Default)
   -------------------------------------------------------------------------- */
:root {
    /* Background Colors */
    --bg-primary: hsl(222, 47%, 8%);
    --bg-secondary: hsl(222, 41%, 12%);
    --bg-tertiary: hsl(222, 38%, 15%);
    --bg-card: hsla(222, 41%, 16%, 0.6);
    --bg-card-hover: hsla(222, 41%, 20%, 0.7);
    --bg-elevated: hsla(222, 41%, 18%, 0.8);

    /* Accent Colors */
    --accent-emerald: hsl(160, 84%, 39%);
    --accent-emerald-light: hsl(160, 84%, 50%);
    --accent-rose: hsl(350, 89%, 60%);
    --accent-rose-light: hsl(350, 89%, 70%);
    --accent-blue: hsl(217, 91%, 60%);
    --accent-blue-light: hsl(217, 91%, 70%);
    --accent-amber: hsl(38, 92%, 50%);
    --accent-amber-light: hsl(38, 92%, 62%);
    --accent-purple: hsl(262, 83%, 58%);
    --accent-purple-light: hsl(262, 83%, 70%);

    /* Text Colors */
    --text-primary: hsl(210, 40%, 96%);
    --text-secondary: hsl(215, 20%, 65%);
    --text-muted: hsl(215, 16%, 47%);
    --text-inverse: hsl(222, 47%, 11%);

    /* Border Colors */
    --border-subtle: hsla(215, 28%, 45%, 0.15);
    --border-glass: hsla(215, 28%, 60%, 0.1);
    --border-accent: hsla(217, 91%, 60%, 0.3);

    /* Glassmorphism */
    --glass-bg: hsla(222, 41%, 16%, 0.4);
    --glass-bg-heavy: hsla(222, 41%, 12%, 0.7);
    --glass-blur: blur(20px);
    --glass-border: 1px solid hsla(215, 28%, 60%, 0.12);
    --glass-border-hover: 1px solid hsla(215, 28%, 60%, 0.25);

    /* Shadows */
    --shadow-sm: 0 1px 3px hsla(222, 47%, 5%, 0.3), 0 1px 2px hsla(222, 47%, 5%, 0.2);
    --shadow-md: 0 4px 14px hsla(222, 47%, 5%, 0.4), 0 2px 6px hsla(222, 47%, 5%, 0.3);
    --shadow-lg: 0 10px 40px hsla(222, 47%, 5%, 0.5), 0 4px 12px hsla(222, 47%, 5%, 0.3);
    --shadow-xl: 0 20px 60px hsla(222, 47%, 5%, 0.6);
    --shadow-glow-emerald: 0 0 20px hsla(160, 84%, 39%, 0.2), 0 0 40px hsla(160, 84%, 39%, 0.1);
    --shadow-glow-rose: 0 0 20px hsla(350, 89%, 60%, 0.2), 0 0 40px hsla(350, 89%, 60%, 0.1);
    --shadow-glow-blue: 0 0 20px hsla(217, 91%, 60%, 0.2), 0 0 40px hsla(217, 91%, 60%, 0.1);
    --shadow-glow-amber: 0 0 20px hsla(38, 92%, 50%, 0.2), 0 0 40px hsla(38, 92%, 50%, 0.1);
    --shadow-glow-purple: 0 0 20px hsla(262, 83%, 58%, 0.2), 0 0 40px hsla(262, 83%, 58%, 0.1);

    /* Spacing Scale (4px base) */
    --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;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index Scale */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-tooltip: 50;
}

/* --------------------------------------------------------------------------
   Light Theme Overrides
   -------------------------------------------------------------------------- */
[data-theme="light"] {
    --bg-primary: hsl(220, 20%, 97%);
    --bg-secondary: hsl(220, 20%, 94%);
    --bg-tertiary: hsl(220, 17%, 91%);
    --bg-card: hsla(220, 20%, 100%, 0.8);
    --bg-card-hover: hsla(220, 20%, 100%, 0.95);
    --bg-elevated: hsla(220, 20%, 100%, 0.9);

    --text-primary: hsl(222, 47%, 11%);
    --text-secondary: hsl(215, 16%, 47%);
    --text-muted: hsl(215, 14%, 62%);
    --text-inverse: hsl(210, 40%, 96%);

    --border-subtle: hsla(215, 28%, 60%, 0.18);
    --border-glass: hsla(215, 28%, 70%, 0.15);

    --glass-bg: hsla(220, 20%, 100%, 0.6);
    --glass-bg-heavy: hsla(220, 20%, 100%, 0.85);
    --glass-border: 1px solid hsla(215, 28%, 70%, 0.2);
    --glass-border-hover: 1px solid hsla(215, 28%, 70%, 0.35);

    --shadow-sm: 0 1px 3px hsla(220, 20%, 50%, 0.08), 0 1px 2px hsla(220, 20%, 50%, 0.06);
    --shadow-md: 0 4px 14px hsla(220, 20%, 50%, 0.1), 0 2px 6px hsla(220, 20%, 50%, 0.08);
    --shadow-lg: 0 10px 40px hsla(220, 20%, 50%, 0.12), 0 4px 12px hsla(220, 20%, 50%, 0.08);
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: hsla(217, 70%, 50%, 0.25);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: hsla(217, 70%, 50%, 0.4);
}

[data-theme="light"] * {
    scrollbar-color: hsla(217, 70%, 50%, 0.25) var(--bg-secondary);
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow: hidden;
    height: 100vh;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: hsla(217, 91%, 60%, 0.25);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: hsla(217, 91%, 60%, 0.45);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: hsla(217, 91%, 60%, 0.25) var(--bg-secondary);
}

/* Selection */
::selection {
    background: hsla(217, 91%, 60%, 0.3);
    color: var(--text-primary);
}

/* Links */
a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-blue-light);
}

/* Utility Classes */
.hidden { display: none !important; }
.font-mono { font-family: var(--font-mono); }
.text-positive { color: var(--accent-emerald); }
.text-negative { color: var(--accent-rose); }
.text-neutral { color: var(--accent-blue); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

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