@layer reset, base, components, utilities, responsive, accessibility;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
    body { min-height: 100vh; min-height: 100dvh; text-rendering: optimizeSpeed; line-height: 1.5; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
    input, button, textarea, select { font: inherit; border: none; background: transparent; }
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
}

@layer base {
    :root {
        --color-bg: #fafbfc;
        --color-panel: #ffffff;
        --color-ink: #0b1220;
        --color-ink-rgb: 11, 18, 32;
        --color-muted: #6f7780;
        --color-muted-rgb: 111, 119, 128;
        --color-accent: #0b84ff;
        --color-accent-rgb: 11, 132, 255;
        --color-accent-secondary: #7b61ff;
        --color-success: #10b981;
        --color-error: #ef4444;
        
        --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
        
        --radius-sm: 8px;
        --radius-md: 16px;
        --radius-lg: 28px;
        --radius-full: 999px;
        
        --shadow-sm: 0 4px 12px rgba(12, 18, 28, 0.04);
        --shadow-md: 0 14px 40px rgba(12, 18, 28, 0.08);
        --shadow-lg: 0 30px 80px rgba(12, 18, 28, 0.15);
        
        --transition-fast: 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
        --transition-base: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        
        --z-base: 1;
        --z-dock: 100;
        --z-modal: 1000;
        --z-lock: 9998;
        --z-cursor: 99999;
    }
    body {
        font-family: var(--font-sans);
        background: var(--color-bg);
        color: var(--color-ink);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }
    body.loading { opacity: 0; pointer-events: none; }
    body.loaded { opacity: 1; transition: opacity 0.6s ease; pointer-events: auto; }
    
    ::selection { background: rgba(var(--color-accent-rgb), 0.2); color: var(--color-ink); }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(var(--color-ink-rgb), 0.15); border-radius: var(--radius-full); }
}

@layer utilities {
    .hidden { display: none !important; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .justify-center { justify-content: center; }
}