/* CloudCollab IDE - Main Styles */

/* ===== Variables ===== */
:root {
    --bg-primary: #1e1e1e;
    --bg-secondary: #252526;
    --bg-tertiary: #2d2d2d;
    --bg-hover: #2a2d2e;
    --bg-input: #3c3c3c;
    --border-default: #3c3c3c;
    --border-muted: #21262d;
    --text-primary: #cccccc;
    --text-secondary: #969696;
    --text-muted: #6e6e6e;
    --text-white: #ffffff;
    --accent-primary: #6366f1;
    --accent-secondary: #10b981;
    --accent-warning: #f59e0b;
    --accent-error: #ef4444;
    --accent-success: #22c55e;
    --syntax-keyword: #c678dd;
    --syntax-function: #61afef;
    --syntax-string: #98c379;
    --syntax-number: #d19a66;
    --syntax-comment: #5c6370;
    --syntax-variable: #e06c75;
    --syntax-class: #e5c07b;
    --glow-primary: rgba(99, 102, 241, 0.3);
    --glow-secondary: rgba(16, 185, 129, 0.3);
    --code-font-size: 14px;
}

/* ===== Reset & Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

/* ===== Layout ===== */
.app-container {
    display: grid;
    grid-template-columns: 48px 240px 1fr 380px;
    grid-template-rows: 48px 1fr 24px;
    height: 100vh;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .app-container { grid-template-columns: 48px 200px 1fr 320px; }
}

@media (max-width: 900px) {
    .app-container { grid-template-columns: 48px 1fr; }
    .sidebar-panel, .ai-panel { display: none; }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== Focus ===== */
*:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}