/* ==========================================================================
   Theme: Cara
   A comprehensive theme inspired by organic earth tones
   Deep forest greens with warm terracotta accents
   Typography: Playfair Display (headings) + Inter (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts Import
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   CSS Custom Properties Override
   -------------------------------------------------------------------------- */
:root {
    /* =======================================================================
       COLOR PALETTE
       ======================================================================= */

    /* Primary Colors - Warm Terracotta (action/CTA color) */
    --color-primary: #D4704A;
    --color-primary-dark: #B85D3A;
    --color-primary-light: #E8916B;

    /* Secondary Colors - Deep Forest Green (trust/brand color) */
    --color-secondary: #1A3A2F;
    --color-secondary-dark: #122620;
    --color-secondary-light: #2A5A4F;

    /* Accent - Sage Green */
    --color-accent: #7BA087;

    /* Dark/Light */
    --color-dark: #2C2C2C;
    --color-dark-light: #4A4A4A;
    --color-light: #F5F1E8;
    --color-white: #FFFFFF;

    /* Grays - warm earth-tinted for organic feel */
    --color-gray-100: #F5F1E8;
    --color-gray-200: #E8DFD0;
    --color-gray-300: #DCD3C5;
    --color-gray-400: #CFC6B8;
    --color-gray-500: #B8B0A3;
    --color-gray-600: #6B6B6B;
    --color-gray-700: #4A4A4A;
    --color-gray-800: #3A3A3A;
    --color-gray-900: #2C2C2C;

    /* Semantic Colors */
    --color-success: #4A7C59;
    --color-warning: #D4944A;
    --color-error: #C45C5C;
    --color-info: #5C8DC4;

    /* =======================================================================
       TYPOGRAPHY
       ======================================================================= */

    /* Font Families */
    --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* Font Sizes - Caravita-inspired scale */
    --font-size-base: 1rem;           /* 16px */
    --font-size-sm: 0.875rem;         /* 14px */
    --font-size-lg: 1.125rem;         /* 18px */
    --font-size-xl: 1.25rem;          /* 20px */
    --font-size-2xl: 1.5rem;          /* 24px */
    --font-size-3xl: 2rem;            /* 32px */
    --font-size-4xl: 2.625rem;        /* 42px */
    --font-size-5xl: 3.5rem;          /* 56px */
    --font-size-hero: 4.5rem;         /* 72px */

    /* Line Heights */
    --line-height-base: 1.6;
    --line-height-tight: 1.15;
    --line-height-heading: 1.2;
    --line-height-loose: 1.7;

    /* =======================================================================
       SPACING (8px base system)
       ======================================================================= */
    --spacing-xxs: 0.25rem;           /* 4px */
    --spacing-xs: 0.5rem;             /* 8px */
    --spacing-sm: 1rem;               /* 16px */
    --spacing-md: 1.5rem;             /* 24px */
    --spacing-lg: 2rem;               /* 32px */
    --spacing-xl: 3rem;               /* 48px */
    --spacing-2xl: 4rem;              /* 64px */
    --spacing-3xl: 6rem;              /* 96px */
    --spacing-4xl: 7.5rem;            /* 120px - section spacing */

    /* Layout */
    --container-max-width: 1200px;
    --container-padding: 3rem;        /* 48px desktop */

    /* =======================================================================
       BORDERS & SHADOWS (Caravita-inspired)
       ======================================================================= */

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;          /* Buttons */
    --border-radius-lg: 16px;         /* Cards */
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;

    /* Shadows - softer, more organic */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.16);

    /* =======================================================================
       TRANSITIONS
       ======================================================================= */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 400ms ease;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY OVERRIDES
   -------------------------------------------------------------------------- */

/* Apply heading font to all headings */
h1, h2, h3, h4, h5, h6,
.hero-title,
.page-header h1,
.section h2 {
    font-family: var(--font-family-heading);
    letter-spacing: -0.01em;
}

/* Heading sizes - Caravita scale */
h1 {
    font-size: var(--font-size-5xl);
    line-height: var(--line-height-tight);
    font-weight: 600;
}

h2 {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-heading);
    font-weight: 600;
}

h3 {
    font-size: var(--font-size-3xl);
    line-height: 1.25;
    font-weight: 500;
}

h4 {
    font-size: var(--font-size-2xl);
    font-family: var(--font-family-base);
    font-weight: 600;
}

h5 {
    font-size: var(--font-size-xl);
    font-family: var(--font-family-base);
    font-weight: 600;
}

h6 {
    font-size: var(--font-size-lg);
    font-family: var(--font-family-base);
    font-weight: 600;
}

/* Hero title - extra large */
.hero-title {
    font-size: clamp(var(--font-size-4xl), 6vw, var(--font-size-hero));
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Body text enhancements */
.hero-description,
.section-intro,
.lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
}

/* Caption/Label styles */
.hero-subtitle,
.breadcrumbs {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   BUTTON OVERRIDES
   -------------------------------------------------------------------------- */

.btn {
    font-family: var(--font-family-base);
    font-weight: 600;
    padding: 1rem 2rem;               /* 16px 32px */
    border-radius: var(--border-radius-md);
    transition: all var(--transition-base);
    text-transform: none;
}

.btn:hover,
.btn:focus {
    transform: translateY(-2px);
}

.btn-primary {
    background-color: var(--color-secondary);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-secondary-light);
    box-shadow: var(--shadow-md);
}

/* Accent button style */
.btn-accent,
.cta-section .btn {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-accent:hover,
.btn-accent:focus,
.cta-section .btn:hover,
.cta-section .btn:focus {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

.btn-outline {
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    background-color: transparent;
}

.btn-outline:hover,
.btn-outline:focus {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.btn-lg {
    padding: 1.125rem 2.25rem;        /* Slightly larger */
    font-size: var(--font-size-lg);
}

/* --------------------------------------------------------------------------
   CARD OVERRIDES
   -------------------------------------------------------------------------- */

.feature-card,
.way-card,
.auth-card {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.feature-card:hover,
.way-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Stat cards - use warm cream background */
.stat-item {
    background-color: rgba(245, 241, 232, 0.1);
    border-radius: var(--border-radius-lg);
}

/* Feature icon - use accent color */
.feature-icon {
    background: var(--color-accent);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   NAVIGATION OVERRIDES
   -------------------------------------------------------------------------- */

.nav-link {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   HERO SECTION OVERRIDES
   -------------------------------------------------------------------------- */

.hero {
    background: linear-gradient(135deg, var(--color-light) 0%, var(--color-white) 100%);
}

.hero::before {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    opacity: 0.08;
}

.hero-subtitle {
    background: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   SECTION OVERRIDES
   -------------------------------------------------------------------------- */

.section--alt {
    background-color: var(--color-light);
}

.stats-section {
    background: var(--color-secondary);
}

.stat-number {
    color: var(--color-primary);
    font-family: var(--font-family-heading);
}

.cta-section {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

/* Page header - use warm cream */
.page-header {
    background: linear-gradient(135deg, var(--color-light) 0%, var(--color-gray-200) 100%);
}

/* --------------------------------------------------------------------------
   FOOTER OVERRIDES
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--color-secondary);
}

.footer-mission {
    color: var(--color-primary);
}

.social-link:hover,
.social-link:focus {
    background: var(--color-primary);
}

/* --------------------------------------------------------------------------
   FORM OVERRIDES
   -------------------------------------------------------------------------- */

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(26, 58, 47, 0.1);
}

.newsletter-input-group input:focus {
    border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   FOCUS STATES
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE TYPOGRAPHY
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    :root {
        --font-size-hero: 3.5rem;     /* 56px */
        --font-size-5xl: 2.75rem;     /* 44px */
        --font-size-4xl: 2.125rem;    /* 34px */
        --font-size-3xl: 1.75rem;     /* 28px */
        --container-padding: 2rem;    /* 32px tablet */
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-hero: 2.625rem;   /* 42px */
        --font-size-5xl: 2.25rem;     /* 36px */
        --font-size-4xl: 1.75rem;     /* 28px */
        --font-size-3xl: 1.5rem;      /* 24px */
        --container-padding: 1.25rem; /* 20px mobile */
    }

    .btn {
        padding: 0.875rem 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   UTILITY CLASSES (Theme-specific)
   -------------------------------------------------------------------------- */

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

.bg-cream {
    background-color: var(--color-light);
}

.bg-sand {
    background-color: var(--color-gray-200);
}