/* ===========================
   BASE.CSS - Design System Foundation
   Klingerman Family RV Trip 2026
   =========================== */

/* --- Font Imports --- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* --- CSS Custom Properties --- */
:root {
    /* Fonts — all sans-serif on adult pages */
    --font-display: 'Fredoka One', cursive;
    --font-body: 'Nunito', sans-serif;
    --font-adult: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Kids Palette (preserved — playful dark theme) */
    --kids-purple: #7E6BA8;
    --kids-purple-light: rgba(126, 107, 168, 0.08);
    --kids-pink: #C44D3E;
    --kids-yellow: #D4A843;
    --kids-orange: #C76C2E;
    --kids-green: #6B8F5E;
    --kids-blue: #5B8FA8;
    --kids-red: #C44D3E;
    --kids-gradient: linear-gradient(135deg, #5C4033 0%, #7E6BA8 100%);

    /* Adult Palette — radically simplified: neutrals + sage + taupe */
    --adult-primary: #3B3228;
    --adult-accent: #5BAF8E;
    --adult-accent-hover: #449E7A;
    --adult-secondary: #9B8579;
    --adult-success: #5BAF8E;
    --adult-warning: #C4A265;
    --adult-danger: #B5716A;
    --adult-text: #3B3228;
    --adult-text-light: #8B7E6A;
    --adult-text-muted: #B5ADA3;
    --adult-bg: #FFFFFF;
    --adult-card-bg: #FFFFFF;
    --adult-surface: #F5F3F0;
    --adult-border: #E8E4DF;

    /* Block-Type Accent Colors */
    --block-drive: #6B8FA8;
    --block-flight: #6B8FA8;
    --block-trail: #5BAF8E;
    --block-meal: #C4A265;
    --block-campfire: #BF7E5E;
    --block-sleep: #8E7EA6;
    --block-movie: #9B8579;
    --block-warning: #C27070;
    --block-tip: #7DAAB8;
    --block-highlight: #D4A843;

    /* Family Member Colors */
    --color-nate: #6889A0;
    --color-kekka: #8E7EA6;
    --color-tommy: #BF7E5E;
    --color-jake: #A89255;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Layout */
    --container-max: 960px;
    --container-narrow: 800px;
    --nav-height: 0px;
    --tab-bar-height: 64px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 12px;
    --radius-pill: 25px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
}

/* --- Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- Base Body --- */
body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Adult Tone — clean white, no background texture */
body.page-adult {
    font-family: var(--font-adult);
    background-color: var(--adult-bg);
    color: var(--adult-text);
}

/* Kids Tone */
body.page-kids {
    font-family: var(--font-body);
    background: var(--kids-gradient);
    color: #333;
}

/* --- Container --- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

.page-adult h1 { font-family: var(--font-adult); font-size: clamp(1.5rem, 3.5vw, 1.875rem); font-weight: 700; color: var(--adult-primary); letter-spacing: -0.02em; }
.page-adult h2 { font-family: var(--font-adult); font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 700; color: var(--adult-primary); letter-spacing: -0.01em; }
.page-adult h3 { font-family: var(--font-adult); font-size: clamp(1rem, 2vw, 1.125rem); font-weight: 600; color: var(--adult-text); letter-spacing: -0.01em; }

/* Section labels — small caps feel */
.section-label {
    font-family: var(--font-adult);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--adult-text-muted);
}

.page-kids h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: white;
    text-shadow: 3px 3px 0 #333;
    text-align: center;
}

.page-kids h2 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    color: var(--kids-purple);
}

.page-kids h3 {
    color: var(--kids-orange);
    font-size: 1.3em;
    font-weight: 700;
}

a {
    color: var(--adult-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Page Content Area --- */
.page-content {
    padding-top: var(--space-md);
    padding-bottom: calc(var(--tab-bar-height) + var(--space-xl) + env(safe-area-inset-bottom, 0px));
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-light { color: var(--adult-text-light); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* --- Responsive Breakpoints (reference) ---
   Phone:   up to 599px
   Tablet:  600px - 1024px
   Desktop: 1025px+
   ----------------------------------------- */

@media (min-width: 600px) {
    .container, .container-narrow {
        padding: 0 var(--space-lg);
    }
}