/**
 * XiMuRa Brand CSS Variables & Base Styles
 * Version: 1.0
 * Last Updated: January 31, 2026
 *
 * Usage: Include this CSS file in all XiMuRa static pages
 * <link rel="stylesheet" href="css/brand.css">
 */

:root {
    /* ===========================================
       BRAND COLORS - Earthy/Ancestral Palette
       =========================================== */

    /* Primary Brand Colors */
    --xm-forest-green: #1a4d3a;
    --xm-copper: #8B4513;
    --xm-clay: #6B4423;

    /* Background Colors */
    --xm-sand: #f5f0e6;
    --xm-parchment: #f9f6f0;
    --xm-white: #fefefe;
    --xm-charcoal: #333333;

    /* ===========================================
       EXISTING SITE COLORS (Compatibility)
       =========================================== */

    --primary: #2d5a27;
    --primary-light: #4a8c3f;
    --primary-dark: #1e3d1a;
    --accent: #c9a227;
    --accent-light: #e8c84a;
    --corridor-gold: #d4a855;
    --corridor-earth: #8b6914;
    --heal-blue: #1a5276;
    --usda-green: #2e7d32;
    --sti-purple: #5e35b1;

    /* ===========================================
       TEXT COLORS
       =========================================== */

    --text: #1a1a1a;
    --text-light: #6b7280;
    --text-muted: #9ca3af;

    /* ===========================================
       BACKGROUND COLORS
       =========================================== */

    --bg: #fefefe;
    --bg-warm: #faf8f5;
    --bg-card: #ffffff;
    --bg-dark: #1a1a1a;

    /* ===========================================
       BORDERS & EFFECTS
       =========================================== */

    --border: #e5e7eb;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius: 12px;
    --radius-lg: 20px;

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

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Josefin Sans', sans-serif;
    --font-serif: 'Lora', 'Crimson Text', Georgia, serif;
}

/* ===========================================
   BASE RESETS
   =========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

/* ===========================================
   CONTAINER
   =========================================== */

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ===========================================
   EARTHY/ANCESTRAL COMPONENTS
   =========================================== */

/* Earthy Section Backgrounds */
.section-earthy {
    background: var(--xm-forest-green);
    color: var(--xm-white);
}

.section-parchment {
    background: var(--xm-parchment);
}

.section-sand {
    background: var(--xm-sand);
}

.section-warm {
    background: var(--bg-warm);
}

/* Earthy Cards */
.card-earthy {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--xm-forest-green);
    transition: all 0.3s ease;
}

.card-earthy:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.card-copper {
    border-top-color: var(--xm-copper);
}

/* Earthy Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-forest {
    background: var(--xm-forest-green);
    color: var(--xm-white);
}

.btn-forest:hover {
    background: #153d2e;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-copper {
    background: var(--xm-copper);
    color: var(--xm-white);
}

.btn-copper:hover {
    background: #6f360f;
    transform: translateY(-2px);
}

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

.btn-outline-forest:hover {
    background: var(--xm-forest-green);
    color: var(--xm-white);
}

/* ===========================================
   PRODUCT COMPONENTS
   =========================================== */

/* Product Card */
.product-card {
    background: var(--xm-parchment);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.product-header {
    background: var(--xm-forest-green);
    color: var(--xm-white);
    padding: 1.5rem;
    text-align: center;
}

.product-header h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.product-header .tagline {
    font-family: var(--font-serif);
    font-style: italic;
    opacity: 0.9;
}

.product-body {
    padding: 1.5rem;
}

.product-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--xm-forest-green);
    text-align: center;
    margin-bottom: 1rem;
}

.product-price .label {
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 400;
    display: block;
}

/* ===========================================
   DECORATIVE ELEMENTS
   =========================================== */

.divider {
    border: none;
    border-top: 2px solid var(--xm-copper);
    margin: 2rem 0;
    max-width: 200px;
}

.divider-center {
    margin-left: auto;
    margin-right: auto;
}

.badge-version {
    font-family: var(--font-accent);
    font-size: 0.85rem;
    color: var(--xm-copper);
    font-weight: 300;
}

.tagline-pillars {
    font-family: var(--font-accent);
    font-size: 0.9rem;
    color: var(--text-light);
    letter-spacing: 0.1em;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

.text-forest { color: var(--xm-forest-green); }
.text-copper { color: var(--xm-copper); }
.text-clay { color: var(--xm-clay); }
.text-charcoal { color: var(--xm-charcoal); }

.bg-forest { background-color: var(--xm-forest-green); }
.bg-copper { background-color: var(--xm-copper); }
.bg-sand { background-color: var(--xm-sand); }
.bg-parchment { background-color: var(--xm-parchment); }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-accent { font-family: var(--font-accent); }
.font-serif { font-family: var(--font-serif); }

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 768px) {
    .product-card {
        margin: 0 1rem;
    }

    .card-earthy {
        padding: 1.5rem;
    }
}