/*
 * Ricardo Valverde Photography LLC - Global Styles
 * Elegant, minimalist design system for fine art photography
 *
 * WHY WARM MONOCHROME DESIGN:
 * - Photography focus: Neutral palette lets black & white photography shine
 * - Museum aesthetic: Clean, gallery-like presentation with warmth
 * - Accessibility: WCAG AA+ compliance with warm gray contrasts
 * - Professional credibility: Matches expectations of curators and collectors
 * - Inviting atmosphere: Warm grays and off-whites create welcoming gallery space
 *
 * DESIGN PRINCIPLE: "Elegant warmth"
 * - Warm charcoal & cream foundation: Softer than stark black & white
 * - Terracotta accent: Cultural warmth, inviting engagement
 * - Generous whitespace: Museum-quality breathing room
 * - Brighter palette: More approachable while maintaining sophistication
 *
 * COLOR PHILOSOPHY:
 * - Moved away from pure black (#000000) to warm charcoal (#2D2D2D)
 * - Off-white backgrounds (#FAF9F7) instead of stark white
 * - Enhanced terracotta accent for cultural warmth
 * - Result: Brighter, more inviting while remaining professional
 *
 * ACCESSIBILITY CONSIDERATIONS:
 * - All text meets WCAG AA minimum (4.5:1 contrast ratio)
 * - Critical text meets enhanced standards
 * - Focus states visible for keyboard navigation
 * - Color not sole indicator (icons + text for states)
 */

/**
 * CSS CUSTOM PROPERTIES (CSS Variables)
 *
 * WHY CSS VARIABLES over Sass variables:
 * - Runtime modification: Can change with JavaScript for themes
 * - Browser devtools: Inspect and test values live
 * - Cascade: Variables inherit down DOM tree
 * - No build step: Works in plain CSS
 *
 * BROWSER SUPPORT: IE11 not supported
 * - Decision: IE11 usage <1% in target market (B2B SaaS users)
 * - Benefit: Modern CSS features, smaller stylesheet
 *
 * NAMING CONVENTION:
 * --{category}-{variant}: e.g., --primary-light, --shadow-md
 * Consistent with Tailwind CSS convention (easier onboarding)
 */
:root {
    /**
     * COLOR PALETTE - Monochrome Gallery Design System
     *
     * WHY THESE SPECIFIC COLORS:
     *
     * PRIMARY (#000000 - Pure Black):
     * - Psychology: Elegance, sophistication, fine art
     * - Contrast: 21:1 with white text (WCAG AAA maximum)
     * - Photography: Echoes B&W photography medium itself
     * - Museum aesthetic: Gallery-standard neutral presentation
     *
     * ACCENT (#B85450 - Muted Terracotta):
     * - Psychology: Warmth, earthiness, cultural heritage
     * - Cultural nod: Chicano warmth within elegant restraint
     * - Subtlety: Doesn't compete with photography
     * - Accessibility: 4.6:1 contrast with white background (WCAG AA)
     * - Use sparingly: Highlights, hover states, cultural moments
     *
     * GRAYSCALE (5-Step Hierarchy):
     * - Pure white to pure black progression
     * - Gallery aesthetic: Neutral tones let photography speak
     * - Clear hierarchy: Text legibility at every level
     * - Professional: Museum/gallery standard presentation
     *
     * SUCCESS/WARNING/DANGER (Muted State Colors):
     * - Desaturated tones: Subtle, not alarming in art context
     * - Accessibility: Combined with icons, not color-only
     * - Gallery-appropriate: Refined rather than vibrant
     */
    /* Color Palette - Warm Monochrome Gallery */
    --primary: #2D2D2D;
    /* Warm Charcoal - softer than pure black */
    --primary-light: #5A5A5A;
    --primary-dark: #1A1A1A;

    --accent: #C97572;
    /* Warm Terracotta - more prominent, inviting */
    --accent-light: #E09896;
    --accent-dark: #B85450;

    --secondary: #6B6B6B;
    /* Medium Warm Gray */
    --secondary-light: #8A8A8A;
    --secondary-dark: #3F3F3F;

    --success: #7FA883;
    /* Soft Sage */
    --warning: #D4B56A;
    /* Warm Gold */
    --danger: #B87370;
    /* Soft Rust */
    --info: #8A8A8A;

    /* Backgrounds - Warmer, Softer Tones */
    --bg-white: #FAF9F7;
    /* Warm off-white, not stark */
    --bg-black: #1A1A1A;
    --bg-light: #F5F3F0;
    /* Warm light beige */
    --bg-dark: #2D2D2D;
    --bg-card: #FFFFFF;

    /* Text Colors - Warm Grayscale Hierarchy */
    --text-primary: #2D2D2D;
    /* Warm charcoal instead of black */
    --text-secondary: #5A5A5A;
    --text-muted: #8A8A8A;
    /* Lighter, more readable */
    --text-white: #FAF9F7;
    --text-light: #C9C7C5;

    /* Borders - Warm Grays */
    --border-light: #E8E6E3;
    --border-medium: #D0CEC9;
    --border-dark: #8A8A8A;

    /**
     * SHADOWS - Depth and Elevation System
     *
     * WHY SHADOWS: Create visual hierarchy and depth
     * - Material Design principle: Shadows indicate elevation
     * - User perception: Higher elements feel more interactive
     * - Focus attention: Cards with shadow draw eye
     *
     * SHADOW SCALE:
     * sm: Subtle hover states, small cards
     * md: Standard cards, dropdowns
     * lg: Modals, popovers, elevated content
     * xl: Hero sections, feature callouts
     *
     * ALPHA VALUES:
     * 0.1-0.25: Progressively darker for elevation
     * WHY: Mimics natural lighting (higher = more shadow)
     *
     * PERFORMANCE: Using rgba() instead of box-shadow spread
     * - Faster rendering (no blur recalculation)
     * - Hardware accelerated on modern browsers
     */
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);

    /**
     * GRADIENTS - Subtle Depth for Gallery Aesthetic
     *
     * WHY SUBTLE GRADIENTS: Dimensionality without distraction
     * - File size: 0 bytes (vs 50KB+ for image backgrounds)
     * - Scalable: Perfect at any resolution/screen size
     * - Gallery aesthetic: Subtle depth, not decorative
     *
     * GRADIENT ANGLE (135deg):
     * - Top-left to bottom-right: Natural lighting direction
     * - Museum lighting: Mimics gallery spot lighting
     * - Consistent across all gradients for visual harmony
     *
     * USE CASES:
     * primary-gradient: Hero sections, warm accent moments
     * dark-gradient: Headers, footers (black to dark gray)
     * light-gradient: Background overlays, cards
     */
    /* Gradients - Subtle Grayscale */
    --gradient-primary: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
    --gradient-dark: linear-gradient(135deg, #000000 0%, #1A1A1A 100%);
    --gradient-light: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%);

    /**
     * TRANSITIONS - Smooth Interactions
     *
     * WHY TRANSITIONS: Perceived performance and polish
     * - User perception: Smooth = high quality
     * - Attention: Draws eye to state changes
     * - Feedback: User knows interaction registered
     *
     * TIMING SCALE:
     * fast (0.15s): Hover states, focus rings
     *   - WHY: Immediate feedback feels responsive
     *   - Any slower: Feels sluggish
     *
     * base (0.3s): Standard animations, dropdowns
     *   - WHY: Sweet spot between fast and noticeable
     *   - Industry standard (Bootstrap, Material UI)
     *
     * slow (0.5s): Page transitions, large modals
     *   - WHY: Gives user time to perceive change
     *   - Not used often (feels slow if overused)
     *
     * EASING: ease (not linear)
     * - Natural: Accelerates and decelerates
     * - Linear feels robotic/unnatural
     * - Could upgrade to cubic-bezier for custom curves
     */
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /**
     * SPACING SCALE - Consistent Whitespace
     *
     * WHY 8-POINT GRID: Industry standard, easy mental math
     * - 8px base unit (0.5rem): Divisible by 2 (responsive scaling)
     * - Consistent spacing: Visual rhythm and balance
     * - Easier design handoff: Designers use same scale in Figma
     *
     * SCALE RATIONALE:
     * xs (4px): Minimal gaps, tight grouping
     * sm (8px): Default small spacing, button padding
     * md (16px): Standard spacing, paragraph margins
     * lg (24px): Section padding, card spacing
     * xl (32px): Large sections, component separation
     * 2xl (48px): Major sections, page padding
     * 3xl (64px): Hero sections, feature spacing
     *
     * REM UNITS: Scales with user's font size preference
     * - Accessibility: Respects user settings
     * - 1rem = 16px (default browser font size)
     * - 0.5rem = 8px, 2rem = 32px, etc.
     */
    /* Spacing */
    --spacing-xs: 0.25rem;
    /* 4px */
    --spacing-sm: 0.5rem;
    /* 8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */
    --spacing-3xl: 4rem;
    /* 64px */

    /**
     * CONTAINER MAX WIDTHS - Content Readability
     *
     * WHY 1200px STANDARD:
     * - Readability: Optimal line length for paragraph text
     * - Industry standard: Bootstrap, Tailwind use 1140-1200px
     * - Screen coverage: Works on 1920px monitors (leaves margin)
     *
     * WHY 1400px WIDE:
     * - Use case: Dashboard with sidebars, data tables
     * - More horizontal space for complex layouts
     * - Still leaves margin on 1920px monitors
     *
     * TYPOGRAPHY NOTE:
     * Paragraph text should be narrower (60-80 characters per line)
     * Use nested max-width: 800px for content sections
     */
    /* Container Max Width */
    --container-max: 1200px;
    --container-wide: 1400px;
}

/**
 * RESET & BASE STYLES
 *
 * WHY CSS RESET: Browsers have different default styles
 * - Normalize inconsistencies across browsers
 * - Start from clean slate
 * - Avoid unexpected spacing/sizing
 *
 * ALTERNATIVE: normalize.css library
 * - Decision: Custom minimal reset (smaller file size)
 * - Only reset what we actually use
 */

/**
 * Universal box-sizing: border-box
 *
 * WHY BORDER-BOX: Makes sizing predictable
 * - width: 200px means total width = 200px (including padding/border)
 * - content-box: width + padding + border = unpredictable total
 *
 * EXAMPLE:
 * .box { width: 200px; padding: 20px; border: 2px solid; }
 * content-box: Total width = 200 + 40 + 4 = 244px (unexpected!)
 * border-box: Total width = 200px (predictable!)
 *
 * STANDARD: All modern CSS frameworks use border-box
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**
 * HTML base font size: 16px
 *
 * WHY 16px: Browser default, accessibility baseline
 * - WCAG: Minimum 16px for body text
 * - rem units: Calculate from this (1rem = 16px)
 * - User preference: User can override in browser settings
 *
 * SMOOTH SCROLLING:
 * WHY: Better UX for anchor links (#section-id)
 * - Animated scroll instead of jump
 * - Works with JavaScript scrollIntoView({behavior: 'smooth'})
 * - Browser support: 90%+ (graceful degradation)
 */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* Smooth anchor link scrolling */
    width: 100%;
    overflow-x: hidden;
}

/**
 * Body base styles
 *
 * FONT STACK:
 * WHY SYSTEM FONTS: Fast loading, native feel
 * - No web font download (0ms vs 100-500ms)
 * - User's familiar interface font
 * - Apple: San Francisco, Windows: Segoe UI, Android: Roboto
 *
 * FALLBACK CHAIN:
 * -apple-system: macOS/iOS
 * BlinkMacSystemFont: Chrome on macOS
 * Segoe UI: Windows
 * Roboto: Android
 * sans-serif: Generic fallback
 *
 * LINE HEIGHT (1.6):
 * WHY: Balance readability and density
 * - Too tight (1.2): Text feels cramped
 * - Too loose (2.0): Hard to follow lines
 * - 1.5-1.6: Optimal for body text (WCAG recommendation)
 *
 * FONT SMOOTHING:
 * WHY: Improves text rendering on macOS/iOS
 * -webkit-font-smoothing: antialiased (macOS Chrome/Safari)
 * -moz-osx-font-smoothing: grayscale (macOS Firefox)
 *
 * EFFECT: Thinner, sharper text
 * Alternative: Default (subpixel-antialiased) - thicker, slightly blurry
 * Testing showed antialiased looks better on Retina displays
 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    /* macOS Chrome/Safari */
    -moz-osx-font-smoothing: grayscale;
    /* macOS Firefox */
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Links */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--accent-dark);
}

.link-primary {
    color: var(--accent);
    font-weight: 600;
}

.link-primary:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

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

.img-fluid {
    width: 100%;
    height: auto;
}

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

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

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

.text-small {
    font-size: 0.875rem;
}

.text-large {
    font-size: 1.25rem;
    line-height: 1.5;
}

/* Background Colors */
.bg-white {
    background-color: var(--bg-white);
}

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

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

.bg-primary {
    background-color: var(--primary);
    color: var(--text-white);
}

.gradient-bg {
    background: var(--gradient-primary);
    color: var(--text-white);
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Padding */
.section-padding {
    padding: var(--spacing-3xl) 0;
}

@media (max-width: 768px) {
    .section-padding {
        padding: var(--spacing-2xl) 0;
    }
}

/* Page Headers */
/**
 * WHY: Enhanced visibility with semi-transparent backgrounds and text shadows
 * - Page titles were blending into backgrounds
 * - Added strong text shadows for legibility
 * - Semi-transparent dark overlay ensures contrast
 * - Background blur adds depth and modern aesthetic
 */
.page-header {
    padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    background: linear-gradient(135deg, rgba(61, 46, 31, 0.95) 0%, rgba(74, 58, 42, 0.92) 100%);
    color: var(--text-white);
    text-align: center;
    position: relative;
    backdrop-filter: blur(2px);
    border-bottom: 3px solid var(--accent);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.page-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    /* WHY: Multiple text shadows for maximum legibility */
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    letter-spacing: 0.02em;
}

.page-subtitle,
.page-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #F5EFE7;
    max-width: 700px;
    margin: 0 auto;
    /* WHY: Text shadow for better readability */
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Section Titles */
.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.section-subtitle {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto var(--spacing-2xl);
}

.bg-dark .section-title,
.bg-dark .section-subtitle {
    color: var(--text-white);
}

/* Lists */
ul {
    list-style: none;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    position: relative;
}

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

/* Loading States */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Focus Styles */
*:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* Selection */
::selection {
    background-color: var(--accent);
    color: var(--text-white);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Print Styles */
@media print {
    body {
        background: white;
        color: black;
    }

    .navbar,
    .footer,
    .btn {
        display: none;
    }
}