/* ============================================
   BASE STYLES
   Variables, Reset, Typography
   ============================================ */

/* Reset */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

/* CSS Variables */
:root {
    /* Primary Colors */
    --bg-primary: #0a59e9;
    --bg-secondary: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #64748b;
    
    /* Accent Colors */
    --accent: #38d200;
    --accent-hover: #2fb800;
    --accent-light: rgba(56, 210, 0, 0.1);
    
    /* CMD Colors */
    --cmd-blue: #0066cc;
    --cmd-blue-hover: #0052a3;
    --cmd-blue-light: #e6f0ff;
    --cmd-blue-border: #99c2ff;
    
    /* Status Colors */
    --success: #059669;
    --success-light: #ecfdf5;
    --success-border: #d1fae5;
    --warning: #d97706;
    --warning-light: #fffbeb;
    --warning-text: #92400e;
    --error: #dc2626;
    --error-light: #fef2f2;
    
    /* Neutral Colors */
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --background-subtle: #fafbfc;
    --background-muted: #f8fafc;
    
    /* Shadows */
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-lg: rgba(0, 0, 0, 0.12);
    --shadow-xl: rgba(0, 0, 0, 0.16);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Z-index layers */
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-fullscreen: 9999;
    --z-toast: 10000;
}

/* Base Typography */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
}

/* Utility Classes */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.mobile-only { 
    display: none !important; 
}

.desktop-only { 
    display: block; 
}