@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

:root {
    /* Color Palette - Legacy Technical Military (Old) */
    --color-primary-dark: #1a2530;
    --color-primary-800: #2c3e50;
    --color-primary-700: #34495e;
    --color-primary-600: #2c3e50;
    --color-primary-500: #34495e; /* Main Brand color */
    
    --color-accent-600: #2980b9;
    --color-accent-500: #3498db;
    
    --color-bg-body: #f5f7fa;
    --color-white: #ffffff;
    
    /* Semantic Colors */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-danger: #e74c3c;
    --color-info: #3498db;
    
    /* Neutral / Grays */
    --color-gray-900: #2c3e50;
    --color-gray-800: #34495e;
    --color-gray-500: #95a5a6;
    --color-gray-300: #bdc3c7;
    --color-gray-200: #ecf0f1;
    --color-gray-100: #f8f9fa;

    /* Fonts (Legacy Matching) */
    --font-heading: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Roboto Mono', monospace;

    /* Spacing - 8px Multiples */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Elevations */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 200ms ease-in-out;
}

/* ── GLOBAL ANIMATIONS ───────────────────────────────────────────── */
@keyframes pageIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

@keyframes urgencyPulse {
    0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
    50%       { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.15), 0 1px 3px rgba(0,0,0,.06); }
}