/* Phase 4.1: CSS Variables & Calm Theming */
:root {
    /* Cloud Dancer Palette (Light Mode) */
    --bg-color: #f0ebe3;        /* Muted off-white */
    --card-bg: #ffffff;
    --text-primary: #3c3c3c;
    --accent-color: #7d8471;    /* Sage green */
    --focus-ring: #005fcc;
    --spacing-unit: 8px;
    --success-color: #a3b18a; /* Soft olive green */
}

[data-theme="dark"] {
    /* Nature Distilled (Dark Mode) */
    --bg-color: #1a1c18;
    --card-bg: #23261f;
    --text-primary: #e2e3da;
    --accent-color: #d1e2cc;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Global 2026 Compliance: High-Contrast Focus States */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 4px;
}

/* Removes default browser margins */
body, html {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    width: 100%;

    /* Prevent accidental horizontal shifts */
    max-width: 100vw;
    overflow-x: hidden;

    /* Only show vertical scroll if content is longer than the screen */
    overflow-y: auto;
    
    /* Ensure height is consistent for sticky footers */
    min-height: 100vh;
}

/* Phase 4.1.3: Layout Utilities */
.hero-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--spacing-unit) * 8) 24px calc(var(--spacing-unit) * 4);
    min-height: calc(100vh - 40px);
    box-sizing: border-box;
}

.glass-card {
    background: var(--card-bg);
    border: 1px solid rgba(128, 128, 128, 0.08);
    border-radius: 32px; /* Soft 2026 edges */
    padding: calc(var(--spacing-unit) * 4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease;
}

/* Phase 4.3: High-Visibility Global Buttons */
button {
    /* 2026 Contrast Standards */
    background-color: var(--accent-color);
    padding: 12px 24px;
    border: none;
    border-radius: 30px; /* Pill shape for "Calm" feel */
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: white;
    /* Smooth interaction */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Specific Dark Mode Contrast Adjustment */
[data-theme="dark"] button {
    background-color: var(--accent-color);
    color: #1a1c18; /* Dark text on light accent for readability */
}

/* Interaction States */
button:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

button:active {
    transform: translateY(0);
}

#submit-vent {
    background: transparent !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9; /* Slight transparency makes it feel softer */
}

#submit-vent:hover {
    transform: scale(1.1);
    opacity: 1; /* Fully opaque on hover for clarity */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

#submit-vent:active {
    transform: scale(0.9);
}

#submit-vent svg {
    /* Adds a subtle 'bloom' to the solid shape to highlight edges and the groove */
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.1));
    transition: transform 0.2s ease;
}

#submit-vent:hover svg {
    /* On hover, the 'groove' becomes more defined due to the scale and shadow */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
    transform: rotate(-10deg) scale(1.1);
}