/* ===========================================
   ResonantNourish - GLOBAL STYLES (1/4)
   BASE, VARIABLES, RESET, TYPOGRAPHY, UTILITIES
   =========================================== */
/* Version 1.1 - Fixed errors & added theme system - Nov 17, 2025 */

/* ========== 1. CSS CUSTOM PROPERTIES (Design Tokens) ========== */
:root {
    /* Primary Colors */
    --rn-pri: #2E8B57;
    --rn-pri-light: #A8D5BA;
    --rn-pri-dark: #236B43;
    --rn-accent: #D9CBB5;
    --rn-accent-dark: #B8A592;

    /* Neutral Colors */
    --rn-ink: #1f2937;
    --rn-muted: #6b7280;
    --rn-lite: #F5F6F5;
    --rn-bd: #e5e7eb;
    --rn-card: #FFFFFF;
    --rn-bg: #FDFBF7;
    
    /* Semantic Colors */
    --rn-success: #27AE60;
    --rn-warning: #F59E0B;
    --rn-error: #E74C3C;
    --rn-info: #3B82F6;
    
    /* Typography */
    --rn-body: clamp(18px, 2.5vw, 20px);
    --rn-line: 1.6;
    --rn-heading-line: 1.3;
    --rn-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rn-font-serif: Georgia, serif;
    
    /* Spacing */
    --rn-btn-min: 48px;
    --rn-container: 1200px;
    --rn-mobile: 20px;
    --rn-nav: 70px;
    
    /* Transitions */
    --rn-fast: 0.2s ease;
    --rn-normal: 0.3s ease;
    --rn-slow: 0.4s ease-in-out;
    
    /* Shadows */
    --rn-shadow: 0 2px 10px rgba(0,0,0,0.1);
    --rn-shadow-hover: 0 4px 20px rgba(0,0,0,0.15);
    
    /* Accessibility */
    --rn-focus-outline-width: 2px;
    --rn-focus-outline-offset: 2px;
    --rn-focus-outline-color: var(--rn-pri);

    /* NEW: Theme Colors */
    /* Deep Green Theme - for Main Pages (root level) */
    --rn-deep-green-bg: #14532B;
    --rn-deep-green-light: #1f6b3a;
    --rn-deep-green-dark: #0f3d20;
    --rn-deep-green-text: #F7FFF7;
    --rn-deep-green-border: rgba(255, 255, 255, 0.06);

    /* Light Green Theme - for Sub Pages (/pages, /shop, /blog) */
    --rn-light-green-bg: #E8F5ED;
    --rn-light-green-light: #D7EFE0;
    --rn-light-green-text: #2c5f3f;
    --rn-light-green-border: rgba(46, 139, 87, 0.10);
}

/* ========== 2. DARK MODE VARIABLES ========== */
.dark, body.dark-mode {
    --rn-bg: #1A1A1A;
    --rn-lite: #1A1A1A;
    --rn-ink: #F0F0F0;
    --rn-muted: #9CA3AF;
    --rn-pri: #8BC1A3;
    --rn-pri-dark: #6C9A7E;
    --rn-pri-light: #1a3a2a;
    --rn-bd: #404040;
    --rn-card: #2A2A2A;
    --rn-accent: #B8A592;

    /* Dark mode theme colors */
    --rn-deep-green-bg: #1A1A1A;
    --rn-deep-green-text: #FFFFFF;
    --rn-deep-green-border: rgba(255, 255, 255, 0.1);
    
    --rn-light-green-bg: #1A1A1A;
    --rn-light-green-text: #FFFFFF;
    --rn-light-green-border: rgba(255, 255, 255, 0.1);
}

/* ========== 3. RESET & BASE STYLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    font-family: var(--rn-font);
    font-size: var(--rn-body);
    line-height: var(--rn-line);
    color: var(--rn-ink);
    background-color: var(--rn-bg);
    transition: background-color var(--rn-normal), color var(--rn-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== 4. TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: var(--rn-heading-line);
    color: var(--rn-ink);
    margin-bottom: 1rem;
}

h1 { font-size: clamp(32px, 5vw, 48px); }
h2 { font-size: clamp(28px, 4vw, 38px); }
h3 { font-size: clamp(24px, 3.5vw, 30px); }
h4 { font-size: clamp(20px, 3vw, 24px); }

p {
    margin-bottom: 1rem;
    color: var(--rn-ink);
}

a {
    color: var(--rn-pri);
    text-decoration: none;
    transition: color var(--rn-fast);
}

a:hover {
    color: var(--rn-pri-dark);
    text-decoration: underline;
}

/* ========== 5. ACCESSIBILITY - FOCUS STATES ========== */
*:focus-visible {
    outline: var(--rn-focus-outline-width) solid var(--rn-focus-outline-color);
    outline-offset: var(--rn-focus-outline-offset);
}

/* ========== 6. THEME SYSTEM ========== */
/* Main Page Theme (Deep Green) */
body.main-page .rn-main-header,
body.main-page .header-background-span,
body.main-page .page-top-frame {
    background: linear-gradient(135deg, var(--rn-deep-green-bg), var(--rn-deep-green-light)) !important;
    border-color: var(--rn-deep-green-border) !important;
}

body.main-page .main-footer,
body.main-page .page-bottom-frame {
    background: linear-gradient(135deg, var(--rn-deep-green-bg), var(--rn-deep-green-dark)) !important;
    color: var(--rn-deep-green-text) !important;
    border-color: var(--rn-deep-green-border) !important;
}

body.main-page .nav-items a {
    color: var(--rn-deep-green-text) !important;
    border-color: var(--rn-deep-green-border) !important;
}

body.main-page .nav-controls button {
    color: var(--rn-deep-green-text) !important;
    border-color: var(--rn-deep-green-border) !important;
}

/* Sub Page Theme (Light Green) */
body:not(.main-page) .rn-main-header,
body:not(.main-page) .header-background-span,
body:not(.main-page) .page-top-frame {
    background: linear-gradient(135deg, var(--rn-light-green-bg), var(--rn-light-green-light)) !important;
    border-color: var(--rn-light-green-border) !important;
}

body:not(.main-page) .main-footer,
body:not(.main-page) .page-bottom-frame {
    background: linear-gradient(135deg, var(--rn-light-green-bg), var(--rn-light-green-light)) !important;
    color: var(--rn-light-green-text) !important;
    border-color: var(--rn-light-green-border) !important;
}

body:not(.main-page) .nav-items a {
    color: var(--rn-light-green-text) !important;
    border-color: var(--rn-light-green-border) !important;
}

body:not(.main-page) .nav-controls button {
    color: var(--rn-light-green-text) !important;
    border-color: var(--rn-light-green-border) !important;
}

/* Common Navigation Styles */
.nav-items a:hover,
.nav-items a.active {
    background: rgba(46, 139, 87, 0.15) !important;
    color: #1e4a2f !important;
}

.nav-controls button {
    background: rgba(255, 255, 255, 0.4) !important;
}

.nav-controls button:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #1e4a2f !important;
}

/* Dark Mode Overrides */
body.dark-mode .nav-items a {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

body.dark-mode .nav-items a:hover,
body.dark-mode .nav-items a.active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

body.dark-mode .nav-controls button {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

body.dark-mode .nav-controls button:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

/* ========== 7. UTILITY CLASSES ========== */
.rn-text-center { text-align: center; }
.rn-text-left { text-align: left; }
.rn-text-right { text-align: right; }

.rn-mt-1 { margin-top: 8px; }
.rn-mt-2 { margin-top: 16px; }
.rn-mt-3 { margin-top: 24px; }

.rn-mb-1 { margin-bottom: 8px; }
.rn-mb-2 { margin-bottom: 16px; }
.rn-mb-3 { margin-bottom: 24px; }

.rn-p-1 { padding: 8px; }
.rn-p-2 { padding: 16px; }
.rn-p-3 { padding: 24px; }

.rn-hidden { display: none; }
.rn-flex { display: flex; }
.rn-items-center { align-items: center; }
.rn-justify-between { justify-content: space-between; }
.rn-gap-2 { gap: 16px; }

.rn-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========== 8. ANIMATIONS ========== */
@keyframes rn-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rn-slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rn-fade-in {
    animation: rn-fadeIn 0.3s ease-out;
}

.rn-slide-up {
    animation: rn-slideUp 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}