/* ==========================================================================
   BASE STYLES - CSS Reset, Variables, Typography, Utilities
   ========================================================================== */

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

/* CSS Variables */
:root {
    /* Colors */
    --primary-color: #e63946;
    --secondary-color: #1d3557;
    --accent-color: #457b9d;
    --text-dark: #1a1a2e;
    --text-light: #555;
    --bg-light: #f0f4f8;           /* Soft blue-grey instead of harsh white */
    --bg-soft: #e8eef4;            /* Slightly darker for alternating sections */
    --bg-card: #ffffff;            /* Keep white for cards only */
    --white: #ffffff;
    --border-color: #e0e0e0;

    /* Success Colors */
    --success-color: #2a9d8f;
    --success-color-dark: #264653;
    --success-bg: #d4edda;
    --success-text: #155724;

    /* Error Colors */
    --error-color: #dc3545;
    --error-bg: #fff5f5;
    --error-text: #721c24;

    /* Warning Colors */
    --warning-color: #ffc107;
    --warning-bg: #fff3cd;
    --warning-bg-light: #ffe69c;
    --warning-text: #856404;

    /* Info Colors */
    --info-color: #17a2b8;
    --info-bg: #d1ecf1;
    --info-text: #0c5460;

    --action-primary: #2a9d8f;           /* Teal - main CTAs */
    --action-primary-light: #3db5a6;     /* Lighter teal for hover */
    --action-primary-dark: #238b7e;      /* Darker teal for active */
    --action-secondary: #1d3557;         /* Navy for secondary buttons */
    --action-secondary-light: #2d4a6f;   /* Lighter navy for hover */

    /* Professional button shadows */
    --shadow-action: 0 4px 14px rgba(42, 157, 143, 0.35);
    --shadow-action-hover: 0 8px 25px rgba(42, 157, 143, 0.45);
    --shadow-secondary: 0 4px 14px rgba(29, 53, 87, 0.25);

    /* Shadows */
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-base: all 0.3s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Typography */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
}

/* Image Defaults */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Link Defaults */
a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-light {
    color: var(--text-light);
}

.text-dark {
    color: var(--text-dark);
}

.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }

.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }