/* base.css - Root Variables and Resets */

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

:root {
    --sage: #87A68F;
    --sage-light: #B4C4B8;
    --sage-dark: #5A7561;
    --blush: #E8B4B8;
    --blush-light: #F5E1E3;
    --cream: #FBF7F4;
    --warm-white: #FEFDFB;
    --charcoal: #2C3E50;
    --gray-dark: #546E7A;
    --gray-medium: #90A4AE;
    --gray-light: #CFD8DC;
    --gray-pale: #ECEFF1;
    --success: #66BB6A;
    --warning: #FFA726;
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    background: var(--gray-pale);
    color: var(--charcoal);
    line-height: 1.5;
    overflow-x: hidden;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* Scrollbar */
.content::-webkit-scrollbar {
    width: 4px;
}

.content::-webkit-scrollbar-track {
    background: transparent;
}

.content::-webkit-scrollbar-thumb {
    background: var(--gray-light);
    border-radius: 2px;
}