@layer reset, base, components, utilities;

@layer reset {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

@layer base {
    :root {
        --accent: #2563ff;
        --accent-hover: #1d4ed8;
        --light: #60a5fa;
        --text: #e2e8f0;
        --text-secondary: #94a3b8;
        --text2: #94a3b8;
        --text1: #f1f5f9;
        --bg: #020617;
        --card-bg: rgba(15, 23, 42, 0.65);
        --border: rgba(37, 99, 255, 0.25);
        --border-color: rgba(255, 255, 255, 0.08);
        --error: #ef4444;
        --success: #22c55e;
        --surface1: #1e293b;
        --surface2: #334155;
        --surface3: #475569;
    }

    body {
        font-family: 'Inter', sans-serif;
        background: var(--bg);
        color: var(--text);
        overflow-x: hidden;
        min-height: 100vh;
    }
}