/* ==========================================
   BASE.CSS - Michelle Langan Mediation Law Firm
   
   TABLE OF CONTENTS
   ==========================================
   1. CSS Reset and Base Styles
   2. Design System Variables
      2.1 Color Palette
      2.2 Gradients
      2.3 Typography
      2.4 Spacing Scale
      2.5 Border Radius
      2.6 Shadows
   3. Base Typography
   4. Utility Classes
   5. Accessibility Utilities
   6. Animation Keyframes
   ========================================== */

/* ========================================
   1. CSS RESET AND BASE STYLES
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-serif);
    line-height: 1.7;
    color: var(--text-primary);
    background-color: var(--bg-white);
}

/* ========================================
   2. DESIGN SYSTEM VARIABLES
======================================== */

/* 2.1 COLOR PALETTE - Based on Michelle's Photo */
:root {
    /* Primary Blues */
    --primary-navy: #0e086b;
    --primary-blue: #0025ac;
    --secondary-blue: #0b15a3;
    --secondary-navy: #020e6e;
    --accent-blue: #021da3;
    --light-blue: #5576cd;
    
    /* Warm Accent Colors */
    --warm-brown: #624735;
    --warm-tan: #b1866e;
    --warm-peach: #e2d3cd;
    --warm-accent: #c9a088;
    
    /* Dark Accents */
    --dark-brown: #261d1b;
    --dark-navy: #0a0822;
    
    /* Text Colors */
    --text-primary: #261d1b;
    --text-secondary: #624735;
    --text-light: #f1f0eb;
    --text-white: #ffffff;
    
    /* Background Colors */
    --bg-white: #ffffff;
    --bg-light: #faf8f6;
    --bg-cream: #f5f0ec;
    --bg-dark: #1d1a46;
    --bg-overlay: rgba(29, 26, 70, 0.95);
    
    /* Border Colors */
    --border-light: #ebc3b2;
    --border-medium: #b1866e;
    --border-dark: #624735;
}

/* 2.2 GRADIENTS */
:root {
    /* Primary Dark Gradient - For hero, footer, and major sections */
    --gradient-dark: linear-gradient(135deg, 
        var(--dark-brown) 0%,
        var(--primary-navy) 50%,
        var(--secondary-navy) 100%);
    
    /* Blue Gradient - For interactive elements and emphasis */
    --gradient-blue: linear-gradient(135deg,
        var(--secondary-blue) 0%,
        var(--accent-blue) 100%);
    
    /* Light Blue Gradient - For subtle highlights */
    --gradient-blue-light: linear-gradient(135deg,
        var(--accent-blue) 0%,
        var(--light-blue) 100%);
    
    /* Warm Gradient - For welcoming, approachable sections */
    --gradient-warm: linear-gradient(135deg,
        var(--warm-peach) 0%,
        var(--bg-cream) 100%);
    
    /* Warm Accent Gradient - For buttons and CTAs */
    --gradient-warm-accent: linear-gradient(135deg,
        var(--warm-brown) 0%,
        var(--warm-tan) 100%);
    
    /* Subtle Light Gradient - For cards and content sections */
    --gradient-light: linear-gradient(135deg,
        #faf8f6 0%,
        #ffffff 100%);
    
    /* Three-stop gradient option for more complex transitions */
    --gradient-dark-extended: linear-gradient(135deg,
        var(--dark-brown) 0%,
        var(--primary-navy) 40%,
        var(--secondary-navy) 100%);
}

/* 2.3 TYPOGRAPHY */
:root {
    --font-serif: "Lora", "PT Serif", "Times New Roman", Times, serif;
    --font-accent: "Libre Baskerville";
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* 2.4 SPACING SCALE */
:root {
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
}

/* 2.5 BORDER RADIUS */
:root {
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
}

/* 2.6 SHADOWS */
:root {
    --shadow-subtle: 0 1px 3px 0 rgba(38, 29, 27, 0.1);
    --shadow-medium: 0 4px 12px 0 rgba(29, 26, 70, 0.15);
    --shadow-strong: 0 10px 30px 0 rgba(29, 26, 70, 0.25);
    --shadow-dramatic: 0 20px 50px 0 rgba(29, 26, 70, 0.4);
}

/* ========================================
   3. BASE TYPOGRAPHY
======================================== */

h1, h2, h3, h4 {
    color: var(--secondary-navy);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-md);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: var(--space-md);
    line-height: 1.8;
}

strong {
    color: var(--primary-navy);
    font-weight: 700;
}

/* ========================================
   4. UTILITY CLASSES
======================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-primary { color: var(--primary-navy); }
.text-secondary { color: var(--text-secondary); }
.text-light { color: var(--text-light); }
.text-gold { color: var(--warm-tan); }

/* ========================================
   5. ACCESSIBILITY UTILITIES
======================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-navy);
    color: var(--text-light);
    padding: var(--space-sm);
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 1001;
    transition: top 0.3s ease;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* Enhanced focus states */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid var(--warm-tan);
    outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   6. ANIMATION KEYFRAMES
======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

/* Enhanced transitions for interactive elements */
.header-navigation a,
.submit-btn,
.adr-method,
.appointment-type,
.certification-section {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}