/* ========================================
   GOOGLE FONTS IMPORT - MUST BE FIRST LINE!
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Boldonse&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Jost:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Staatliches&display=swap');

/**
 * TEPETL DESIGN SYSTEM v3.4
 * 
 * Width System:
 * - 100% dark background (#121212) - INFINITE
 * - 1500px light content container
 * - 1000px main content alignment
 * - 800px body text
 */

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
    /* Width System */
    --tepetl-content-max: 1500px;
    --tepetl-content-main: 1000px;
    --tepetl-body-text: 800px;
    --tepetl-map-width: 1300px;
    
    /* Colors - Dark Theme (INFINITE BACKGROUND) */
    --tepetl-bg-infinite: #121212;
    --tepetl-bg-darker: #0a0a0a;
    --tepetl-bg-gallery: #1a1a1a;
    
    /* Colors - Light Theme (Content) */
    --tepetl-bg-content: #faf9f7;
    --tepetl-bg-paper: #ffffff;
    --tepetl-bg-stats-header: #f0efed;
    --tepetl-bg-tabs: #f0efed;
    --tepetl-bg-map: #e8e4de;
    --tepetl-bg-tabs-content: #E3E3E3;
    
    /* Colors - Accent */
    --tepetl-primary: #d97706;
    --tepetl-primary-hover: #b45309;
    --tepetl-secondary: #3f6212;
    --tepetl-coral: #e85d4c;
    --tepetl-coral-light: #f08070;
    --tepetl-gold-faded: rgba(217, 119, 6, 0.4);
    
    /* Difficulty Rating Colors */
    --difficulty-1-2: #90EE90;   /* Very Light Green */
    --difficulty-3: #32CD32;     /* Medium Green */
    --difficulty-4-5: #4169E1;   /* Medium Blue */
    --difficulty-6: #FFD700;     /* Yellow */
    --difficulty-7: #FFA500;     /* Orange */
    --difficulty-8: #FF4500;     /* Red */
    --difficulty-9: #8B0000;     /* Dark Red */
    --difficulty-10: #000000;    /* Black */
    
    /* Colors - Text */
    --tepetl-text-dark: #1a1a1a;
    --tepetl-text-body: #374151;
    --tepetl-text-muted: #6b7280;
    --tepetl-text-light: #e5e7eb;
    
    /* Typography */
    --font-display: 'Barlow Condensed', sans-serif;
    --font-display-hero: 'Boldonse', cursive;
    --font-stat-value: 'Boldonse', cursive;
    --font-stat-label: 'Outfit', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    
    /* Z-Index */
    --z-sticky: 100;
    --z-nav: 200;
    --z-modal: 300;
    --z-tooltip: 400;
    --z-lightbox: 500;
}

/* ========================================
   BASE STYLES
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--tepetl-bg-infinite);
}

/* CRITICAL: Infinite dark background on body */
body,
body.tepetl-route,
body.tepetl-segment,
body.tepetl-event,
body.tepetl-story,
body.tepetl-contributor,
body.tepetl-tour,
body.tepetl-profile {
    background-color: var(--tepetl-bg-infinite) !important;
    font-family: var(--font-body);
    color: var(--tepetl-text-body);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Single page wrapper */
.tepetl-single,
.tepetl-single-route,
.tepetl-single-segment,
.tepetl-single-event {
    background-color: transparent;
    font-family: var(--font-body);
    width: 100%;
}

/* ========================================
   SECTIONS WITH LIGHT BACKGROUND (1500px max)
   All content sections get light bg and center
   ======================================== */
.tepetl-hero-section,
.tepetl-stats-section,
.tepetl-visual-profile-section,
.tepetl-quote-section,
.tepetl-editorial,
.tepetl-editorial-boxes,
.tepetl-safety-section,
.tepetl-tabs-section,
.tepetl-map-section,
.tepetl-contributors-section,
.tepetl-related-section {
    max-width: var(--tepetl-content-max);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--tepetl-bg-content);
}

/* Dark sections stay dark */
.tepetl-breadcrumb-bar,
.tepetl-gallery-section,
.tepetl-location-section {
    background-color: var(--tepetl-bg-darker);
}