/* FILE: assets/css/base.css (new) */

:root {
    /* Colors */
    --header-gradient: linear-gradient(45deg, #ff6b6b, #ee5a24);
    --nap-gradient: linear-gradient(45deg, #a8e6cf, #dcedc1);
    --night-long-gradient: linear-gradient(45deg, #1d3557, #2c3e50);
    --night-short-gradient: linear-gradient(45deg, #457b9d, #5e8b9e);

    --color-save: #2ecc71;
    --color-update: #27ae60;
    --color-cancel: #f39c12;
    --color-delete: #e74c3c;
    --color-action-secondary: #3498db;

    --color-red: #e74c3c;
    --color-orange: #f39c12;
    --color-green: #2ecc71;
    --color-brown: #8B4513;
    --color-blue: #3498db;
    --color-grey: #95a5a6;

    --bg-light: #f8f9fa;
    /* --- MODIFICATION: New pastel green background color --- */
    --bg-pastel-green: #f0fff4;
    --border-color: #e1e8ed;
    --text-dark: #333;
    --text-light: #555;
    --text-white: white;

    /* Spacing & Sizing */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;

    /* Shadows */
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.1);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* --- MODIFICATION: Use new background color --- */
    background: var(--bg-pastel-green);
    min-height: 100vh;
    color: var(--text-dark);
}

.container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: var(--text-white);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

@media (min-width: 520px) {
    body {
        padding: 20px;
    }
    .container {
        border-radius: var(--border-radius-lg);
    }
}

.loading {
    text-align: center;
    padding: 20px;
    color: var(--text-light);
}

.error {
    background: #ffe6e6;
    color: #d63031;
    padding: 15px;
    border-radius: 10px;
    margin: 20px;
    border: 1px solid #fab1a0;
}