:root {
    --primary-color: #4A6FA5; /* Serene Blue */
    --primary-hover: #3A5A8A; /* Deeper Blue */
    --secondary-color: #8B7355; /* Warm Taupe */
    --secondary-hover: #6F5C44; /* Deeper Taupe */
    --success-color: #5C8A5C; /* Soft Sage */
    --success-hover: #4A704A;
    --danger-color: #B85450; /* Muted Burgundy */
    --danger-hover: #9A4340;
    --info-color: #6B9BC3; /* Light Blue */
    --info-hover: #5580A8;
    --warning-color: #C9A05B; /* Warm Gold */

    --bg-body: #F7F5F2; /* Soft Cream */
    --bg-container: #FFFFFF;
    --bg-card: #FFFFFF; /* Pure White */
    --bg-header: #3D5A7C; /* Deep Blue */

    --text-main: #2C3E50; /* Charcoal Blue */
    --text-muted: #6C7A89; /* Slate Gray */
    --text-light: #FFFFFF;
    --text-header: #e0e0e0;

    --border-color: #E0DDD8; /* Soft Beige */
    --input-border: #C8C4BE; /* Warm Gray */

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* Borders & Shadows */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --box-shadow-container: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    --box-shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    /* Layout */
    --container-width-md: 1000px;
    --container-width-sm: 500px;
}