/**
 * Base Styles - Global resets, canvas, and CSS custom properties
 */

/* ═══════════════════════════════════════════════════════════════
   CSS Custom Properties — single source of truth for theming
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Brand Colors */
    --color-primary: #4CAF50;
    --color-primary-hover: #45a049;
    --color-primary-rgb: 76, 175, 80;

    --color-danger: #F44336;
    --color-danger-dark: #D32F2F;
    --color-danger-rgb: 244, 67, 54;

    --color-warning: #FF9800;
    --color-warning-rgb: 255, 152, 0;

    --color-info: #2196F3;
    --color-info-rgb: 33, 150, 243;

    --color-purple: #9C27B0;
    --color-purple-rgb: 156, 39, 176;

    /* AI Chat accent */
    --color-ai-start: #667eea;
    --color-ai-end: #764ba2;
    --color-ai-rgb: 102, 126, 234;
    --gradient-ai: linear-gradient(135deg, var(--color-ai-start) 0%, var(--color-ai-end) 100%);

    /* Backgrounds */
    --bg-body: #2a2a3e;
    --bg-dark: #1a1a2e;
    --bg-darker: #0f0f1a;
    --bg-darkest: #0d0d1a;
    --bg-panel: rgba(0, 0, 0, 0.9);
    --bg-surface: rgba(255, 255, 255, 0.03);
    --bg-surface-hover: rgba(255, 255, 255, 0.1);
    --gradient-header: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

    /* Text */
    --text-primary: #fff;
    --text-secondary: #e0e0e0;
    --text-muted: #ccc;
    --text-dim: rgba(255, 255, 255, 0.6);
    --text-faint: rgba(255, 255, 255, 0.4);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-muted: #333;
    --border-input: #444;

    /* Z-Index Scale — documented stacking order */
    --z-canvas: 0;
    --z-panels: 100;         /* left/right panel stacks */
    --z-floating: 999;       /* floating panels (AI chat, accident panel) */
    --z-toggle: 1000;        /* toggle buttons, footer */
    --z-scenario-progress: 1500;
    --z-control-bar: 2000;   /* bottom control bar, modals */
    --z-header: 2500;        /* app header, scenario overlay */
    --z-modal-overlay: 10000; /* detail modals, top-most */

    /* Spacing */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50%;

    /* Fonts */
    --font-family: Arial, sans-serif;
    --font-mono: 'Consolas', 'Courier New', monospace;
    --font-ui: 'Segoe UI', sans-serif;
}

body {
    margin: 0;
    background: var(--bg-body);
    overflow: hidden;
    height: 100vh;
    font-family: Arial, sans-serif;
}

canvas#myCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background: var(--bg-body);
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

button:hover {
    background: #eee;
}

#controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    bottom: 60px;
    right: 20px;
}