/**
 * Base CSS - Reset, Variables, Typography, Animations
 * Professional Warm Design System for Atella Simulation Lab
 */

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

/* ============================================
   CSS VARIABLES (Design Tokens)
   ============================================ */
:root {
    /* Backgrounds */
    --bg-cream: #faf6f0;
    --bg-warm: #f5ede3;
    --bg-card: #ffffff;

    /* Primary Accent (Terracotta) */
    --accent: #c4704b;
    --accent-hover: #b35f3a;
    --accent-light: rgba(196, 112, 75, 0.1);

    /* Secondary Colors */
    --sage: #7a9a8a;
    --sage-light: rgba(122, 154, 138, 0.1);
    --gold: #c9a857;
    --gold-light: rgba(201, 168, 87, 0.1);
    --plum: #8b6b7d;

    /* Text Colors */
    --text: #2d2a26;
    --text-muted: #7a756d;
    --text-light: #a8a29e;

    /* Borders */
    --border: #e8e0d5;

    /* Transitions */
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 20px rgba(196, 112, 75, 0.25);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-cream);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
}

/* Monospace for labels and metadata */
.mono {
    font-family: 'DM Mono', monospace;
}

/* ============================================
   ATMOSPHERIC BACKGROUND
   ============================================ */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(196, 112, 75, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(122, 154, 138, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(201, 168, 87, 0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes breathe {
    0%, 100% { box-shadow: 0 4px 20px rgba(196, 112, 75, 0.2); }
    50% { box-shadow: 0 6px 30px rgba(196, 112, 75, 0.35); }
}

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

/* ============================================
   UTILITY CLASSES
   ============================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Color utilities */
.text-success { color: var(--sage); }
.text-warning { color: var(--gold); }
.text-danger { color: var(--accent); }
.text-muted { color: var(--text-muted); }

.bg-success { background: var(--sage); }
.bg-warning { background: var(--gold); }
.bg-danger { background: var(--accent); }