/**
 * Mythology-Specific Color Palettes
 *
 * This file defines distinct color schemes for each mythology tradition,
 * preserving the visual identity of each culture while enabling dynamic
 * content loading from Firebase.
 *
 * Usage: Add data-mythology="greek" to body or container element
 */

/* ============================================================================
   GREEK MYTHOLOGY - Gold, Marble, Olive
   ============================================================================ */
[data-mythology="greek"] {
    --mythos-primary: #DAA520;        /* Goldenrod - Zeus's lightning, divine gold */
    --mythos-primary-rgb: 218, 165, 32;
    --mythos-secondary: #FFD700;      /* Gold - Olympic splendor */
    --mythos-secondary-rgb: 255, 215, 0;
    --mythos-accent: #8B4513;         /* Saddle Brown - Earth, olive wood */
    --mythos-surface: rgba(218, 165, 32, 0.1);
    --mythos-border: rgba(218, 165, 32, 0.3);
    --mythos-gradient-start: #DAA520;
    --mythos-gradient-end: #FFD700;
}

/* ============================================================================
   NORSE MYTHOLOGY - Ice Blue, Storm Grey, Silver
   ============================================================================ */
[data-mythology="norse"] {
    --mythos-primary: #4682B4;        /* Steel Blue - Northern skies, ice */
    --mythos-primary-rgb: 70, 130, 180;
    --mythos-secondary: #87CEEB;      /* Sky Blue - Clear northern day */
    --mythos-secondary-rgb: 135, 206, 235;
    --mythos-accent: #2F4F4F;         /* Dark Slate Grey - Storm clouds */
    --mythos-surface: rgba(70, 130, 180, 0.1);
    --mythos-border: rgba(70, 130, 180, 0.3);
    --mythos-gradient-start: #2F4F4F;
    --mythos-gradient-end: #4682B4;
}

/* ============================================================================
   EGYPTIAN MYTHOLOGY - Desert Gold, Sandstone, Lapis
   ============================================================================ */
[data-mythology="egyptian"] {
    --mythos-primary: #CD853F;        /* Peru - Desert sand, sandstone */
    --mythos-primary-rgb: 205, 133, 63;
    --mythos-secondary: #DAA520;      /* Goldenrod - Pharaonic gold */
    --mythos-secondary-rgb: 218, 165, 32;
    --mythos-accent: #4169E1;         /* Royal Blue - Lapis lazuli */
    --mythos-surface: rgba(205, 133, 63, 0.1);
    --mythos-border: rgba(205, 133, 63, 0.3);
    --mythos-gradient-start: #CD853F;
    --mythos-gradient-end: #DAA520;
}

/* ============================================================================
   HINDU MYTHOLOGY - Saffron, Lotus Pink, Sacred Orange
   ============================================================================ */
[data-mythology="hindu"] {
    --mythos-primary: #FF6347;        /* Tomato - Sacred saffron, holy fire */
    --mythos-primary-rgb: 255, 99, 71;
    --mythos-secondary: #FFA500;      /* Orange - Sunrise, spiritual awakening */
    --mythos-secondary-rgb: 255, 165, 0;
    --mythos-accent: #8B008B;         /* Dark Magenta - Divine purple */
    --mythos-surface: rgba(255, 99, 71, 0.1);
    --mythos-border: rgba(255, 99, 71, 0.3);
    --mythos-gradient-start: #FF6347;
    --mythos-gradient-end: #FFA500;
}

/* ============================================================================
   BUDDHIST MYTHOLOGY - Lotus White, Meditation Gold, Enlightenment Blue
   ============================================================================ */
[data-mythology="buddhist"] {
    --mythos-primary: #FFD700;        /* Gold - Enlightenment, Buddha statues */
    --mythos-primary-rgb: 255, 215, 0;
    --mythos-secondary: #F0E68C;      /* Khaki - Lotus petals */
    --mythos-secondary-rgb: 240, 230, 140;
    --mythos-accent: #4682B4;         /* Steel Blue - Sky, meditation */
    --mythos-surface: rgba(255, 215, 0, 0.1);
    --mythos-border: rgba(255, 215, 0, 0.3);
    --mythos-gradient-start: #F0E68C;
    --mythos-gradient-end: #FFD700;
}

/* ============================================================================
   CHINESE MYTHOLOGY - Imperial Red, Jade Green, Dragon Gold
   ============================================================================ */
[data-mythology="chinese"] {
    --mythos-primary: #DC143C;        /* Crimson - Imperial red, luck */
    --mythos-primary-rgb: 220, 20, 60;
    --mythos-secondary: #FFD700;      /* Gold - Dragon, prosperity */
    --mythos-secondary-rgb: 255, 215, 0;
    --mythos-accent: #228B22;         /* Forest Green - Jade */
    --mythos-surface: rgba(220, 20, 60, 0.1);
    --mythos-border: rgba(220, 20, 60, 0.3);
    --mythos-gradient-start: #DC143C;
    --mythos-gradient-end: #FFD700;
}

/* ============================================================================
   JAPANESE MYTHOLOGY - Cherry Blossom, Rising Sun, Sacred Red
   ============================================================================ */
[data-mythology="japanese"] {
    --mythos-primary: #C41E3A;        /* Crimson Glory - Sacred torii gates */
    --mythos-primary-rgb: 196, 30, 58;
    --mythos-secondary: #FFD700;      /* Gold - Imperial chrysanthemum */
    --mythos-secondary-rgb: 255, 215, 0;
    --mythos-accent: #FFB7C5;         /* Cherry Blossom Pink */
    --mythos-surface: rgba(196, 30, 58, 0.1);
    --mythos-border: rgba(196, 30, 58, 0.3);
    --mythos-gradient-start: #C41E3A;
    --mythos-gradient-end: #FFD700;
}

/* ============================================================================
   CELTIC MYTHOLOGY - Forest Green, Stone Grey, Druid Gold
   ============================================================================ */
[data-mythology="celtic"] {
    --mythos-primary: #228B22;        /* Forest Green - Sacred groves */
    --mythos-primary-rgb: 34, 139, 34;
    --mythos-secondary: #32CD32;      /* Lime Green - Life, nature */
    --mythos-secondary-rgb: 50, 205, 50;
    --mythos-accent: #708090;         /* Slate Grey - Standing stones */
    --mythos-surface: rgba(34, 139, 34, 0.1);
    --mythos-border: rgba(34, 139, 34, 0.3);
    --mythos-gradient-start: #228B22;
    --mythos-gradient-end: #32CD32;
}

/* ============================================================================
   SUMERIAN/BABYLONIAN MYTHOLOGY - Clay Terracotta, Lapis Blue, Bronze
   ============================================================================ */
[data-mythology="sumerian"],
[data-mythology="babylonian"],
[data-mythology="mesopotamian"] {
    --mythos-primary: #CD853F;        /* Peru - Clay tablets, ziggurat */
    --mythos-primary-rgb: 205, 133, 63;
    --mythos-secondary: #DEB887;      /* Burlywood - Desert, ancient cities */
    --mythos-secondary-rgb: 222, 184, 135;
    --mythos-accent: #4169E1;         /* Royal Blue - Lapis, sacred blue */
    --mythos-surface: rgba(205, 133, 63, 0.1);
    --mythos-border: rgba(205, 133, 63, 0.3);
    --mythos-gradient-start: #8B4513;
    --mythos-gradient-end: #CD853F;
}

/* ============================================================================
   AZTEC/MAYAN MYTHOLOGY - Turquoise, Obsidian, Maize Gold
   ============================================================================ */
[data-mythology="aztec"],
[data-mythology="mayan"],
[data-mythology="mesoamerican"] {
    --mythos-primary: #40E0D0;        /* Turquoise - Sacred stone */
    --mythos-primary-rgb: 64, 224, 208;
    --mythos-secondary: #FFD700;      /* Gold - Sun, maize */
    --mythos-secondary-rgb: 255, 215, 0;
    --mythos-accent: #8B0000;         /* Dark Red - Sacrifice, blood */
    --mythos-surface: rgba(64, 224, 208, 0.1);
    --mythos-border: rgba(64, 224, 208, 0.3);
    --mythos-gradient-start: #40E0D0;
    --mythos-gradient-end: #FFD700;
}

/* ============================================================================
   CHRISTIAN MYTHOLOGY - Heavenly Gold, Sacred Purple, Divine White
   ============================================================================ */
[data-mythology="christian"],
[data-mythology="biblical"] {
    --mythos-primary: #8B008B;        /* Dark Magenta - Royal purple, bishops */
    --mythos-primary-rgb: 139, 0, 139;
    --mythos-secondary: #FFD700;      /* Gold - Divine light, halos */
    --mythos-secondary-rgb: 255, 215, 0;
    --mythos-accent: #4169E1;         /* Royal Blue - Heaven, Mary */
    --mythos-surface: rgba(139, 0, 139, 0.1);
    --mythos-border: rgba(139, 0, 139, 0.3);
    --mythos-gradient-start: #8B008B;
    --mythos-gradient-end: #FFD700;
}

/* ============================================================================
   JEWISH MYTHOLOGY - Torah Blue, Temple Gold, Covenant White
   ============================================================================ */
[data-mythology="jewish"],
[data-mythology="hebrew"],
[data-mythology="kabbalah"] {
    --mythos-primary: #4169E1;        /* Royal Blue - Tallit stripes */
    --mythos-primary-rgb: 65, 105, 225;
    --mythos-secondary: #FFD700;      /* Gold - Temple, menorah */
    --mythos-secondary-rgb: 255, 215, 0;
    --mythos-accent: #FFFFFF;         /* White - Purity, covenant */
    --mythos-surface: rgba(65, 105, 225, 0.1);
    --mythos-border: rgba(65, 105, 225, 0.3);
    --mythos-gradient-start: #4169E1;
    --mythos-gradient-end: #87CEEB;
}

/* ============================================================================
   ISLAMIC MYTHOLOGY - Emerald Green, Crescent Silver, Calligraphy Gold
   ============================================================================ */
[data-mythology="islamic"],
[data-mythology="muslim"],
[data-mythology="sufi"] {
    --mythos-primary: #50C878;        /* Emerald - Paradise gardens */
    --mythos-primary-rgb: 80, 200, 120;
    --mythos-secondary: #C0C0C0;      /* Silver - Moon, stars */
    --mythos-secondary-rgb: 192, 192, 192;
    --mythos-accent: #FFD700;         /* Gold - Calligraphy, domes */
    --mythos-surface: rgba(80, 200, 120, 0.1);
    --mythos-border: rgba(80, 200, 120, 0.3);
    --mythos-gradient-start: #50C878;
    --mythos-gradient-end: #32CD32;
}

/* ============================================================================
   NATIVE AMERICAN MYTHOLOGY - Earth Brown, Sky Blue, Sun Yellow
   ============================================================================ */
[data-mythology="native-american"],
[data-mythology="indigenous"],
[data-mythology="navajo"],
[data-mythology="lakota"] {
    --mythos-primary: #8B4513;        /* Saddle Brown - Mother Earth */
    --mythos-primary-rgb: 139, 69, 19;
    --mythos-secondary: #F4A460;      /* Sandy Brown - Desert, plains */
    --mythos-secondary-rgb: 244, 164, 96;
    --mythos-accent: #4682B4;         /* Steel Blue - Sky, spirit */
    --mythos-surface: rgba(139, 69, 19, 0.1);
    --mythos-border: rgba(139, 69, 19, 0.3);
    --mythos-gradient-start: #8B4513;
    --mythos-gradient-end: #F4A460;
}

/* ============================================================================
   AFRICAN MYTHOLOGY - Savanna Gold, Sunset Orange, Night Purple
   ============================================================================ */
[data-mythology="african"],
[data-mythology="yoruba"],
[data-mythology="vodou"] {
    --mythos-primary: #DAA520;        /* Goldenrod - Savanna sun */
    --mythos-primary-rgb: 218, 165, 32;
    --mythos-secondary: #FF8C00;      /* Dark Orange - Sunset */
    --mythos-secondary-rgb: 255, 140, 0;
    --mythos-accent: #4B0082;         /* Indigo - Night sky, ancestors */
    --mythos-surface: rgba(218, 165, 32, 0.1);
    --mythos-border: rgba(218, 165, 32, 0.3);
    --mythos-gradient-start: #DAA520;
    --mythos-gradient-end: #FF8C00;
}

/* ============================================================================
   SLAVIC MYTHOLOGY - Forest Deep Green, Snow White, Fire Red
   ============================================================================ */
[data-mythology="slavic"],
[data-mythology="russian"],
[data-mythology="baltic"] {
    --mythos-primary: #2F4F2F;        /* Dark Green - Deep forests */
    --mythos-primary-rgb: 47, 79, 47;
    --mythos-secondary: #DC143C;      /* Crimson - Fire, passion */
    --mythos-secondary-rgb: 220, 20, 60;
    --mythos-accent: #F0F8FF;         /* Alice Blue - Snow, winter */
    --mythos-surface: rgba(47, 79, 47, 0.1);
    --mythos-border: rgba(47, 79, 47, 0.3);
    --mythos-gradient-start: #2F4F2F;
    --mythos-gradient-end: #228B22;
}

/* ============================================================================
   ROMAN MYTHOLOGY - Imperial Purple, Senate White, Legion Red
   ============================================================================ */
[data-mythology="roman"],
[data-mythology="etruscan"] {
    --mythos-primary: #800080;        /* Purple - Imperial power */
    --mythos-primary-rgb: 128, 0, 128;
    --mythos-secondary: #DC143C;      /* Crimson - Legion banners */
    --mythos-secondary-rgb: 220, 20, 60;
    --mythos-accent: #FFD700;         /* Gold - Triumph, laurels */
    --mythos-surface: rgba(128, 0, 128, 0.1);
    --mythos-border: rgba(128, 0, 128, 0.3);
    --mythos-gradient-start: #800080;
    --mythos-gradient-end: #DC143C;
}

/* ============================================================================
   UNIVERSAL/COMPARATIVE MYTHOLOGY - Purple, Cosmic themes
   ============================================================================ */
[data-mythology="universal"],
[data-mythology="comparative"],
[data-mythology="world"],
[data-mythology="cross-cultural"] {
    --mythos-primary: #9B59B6;        /* Purple - Universal wisdom */
    --mythos-primary-rgb: 155, 89, 182;
    --mythos-secondary: #8E44AD;      /* Darker Purple - Depth */
    --mythos-secondary-rgb: 142, 68, 173;
    --mythos-accent: #F39C12;         /* Orange - Enlightenment */
    --mythos-surface: rgba(155, 89, 182, 0.1);
    --mythos-border: rgba(155, 89, 182, 0.3);
    --mythos-gradient-start: #9B59B6;
    --mythos-gradient-end: #8E44AD;
}

/* ============================================================================
   ZOROASTRIAN MYTHOLOGY - Fire Gold, Sky Blue, Pure White
   ============================================================================ */
[data-mythology="zoroastrian"],
[data-mythology="persian"] {
    --mythos-primary: #FF8C00;        /* Dark Orange - Sacred fire */
    --mythos-primary-rgb: 255, 140, 0;
    --mythos-secondary: #FFD700;      /* Gold - Divine light */
    --mythos-secondary-rgb: 255, 215, 0;
    --mythos-accent: #87CEEB;         /* Sky Blue - Ahura Mazda */
    --mythos-surface: rgba(255, 140, 0, 0.1);
    --mythos-border: rgba(255, 140, 0, 0.3);
    --mythos-gradient-start: #FF8C00;
    --mythos-gradient-end: #FFD700;
}

/* ============================================================================
   DEFAULT/FALLBACK - Used when no specific mythology is set
   Provides base RGB values for CSS calculations
   ============================================================================ */
[data-mythology] {
    --mythos-primary-rgb: var(--color-primary-rgb, 139, 92, 246);
    --mythos-secondary-rgb: var(--color-secondary-rgb, 59, 130, 246);
}

/* ============================================================================
   UNIVERSAL STYLING - Applied to all mythologies
   ============================================================================ */

/* Deity/Entity Header */
[data-mythology] .deity-header,
[data-mythology] .entity-header,
[data-mythology] .hero-section {
    background: linear-gradient(135deg, var(--mythos-gradient-start), var(--mythos-gradient-end));
    color: var(--color-text-primary, white);
    padding: var(--space-12, 3rem) var(--space-8, 2rem);
    border-radius: var(--radius-2xl, 1.5rem);
    margin-bottom: var(--space-8, 2rem);
    border: 2px solid var(--mythos-border);
    position: relative;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
}

/* Deity Icon */
[data-mythology] .deity-icon,
[data-mythology] .entity-icon,
[data-mythology] .hero-icon-display {
    font-size: var(--text-6xl, 4rem);
    margin-bottom: var(--space-4, 1rem);
    text-align: center;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Attribute Cards */
[data-mythology] .attribute-card,
[data-mythology] .subsection-card {
    background: var(--mythos-surface);
    backdrop-filter: blur(10px);
    border: 2px solid var(--mythos-border);
    padding: var(--space-4, 1rem);
    border-radius: var(--radius-lg, 0.75rem);
    transition: all 0.3s ease;
}

[data-mythology] .attribute-card:hover,
[data-mythology] .subsection-card:hover {
    background: var(--color-surface-hover);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
}

/* Attribute Labels */
[data-mythology] .attribute-label,
[data-mythology] .subsection-title {
    color: var(--mythos-primary);
    font-weight: var(--font-bold, 700);
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2, 0.5rem);
}

/* Glass Cards */
[data-mythology] .glass-card {
    background: var(--mythos-surface);
    backdrop-filter: blur(16px);
    border: 2px solid var(--mythos-border);
    border-radius: var(--radius-xl, 1rem);
    padding: var(--space-6, 1.5rem);
    margin-bottom: var(--space-6, 1.5rem);
}

/* Section Headings */
[data-mythology] h2 {
    color: var(--mythos-primary);
}

[data-mythology] h3 {
    color: var(--mythos-secondary);
}

/* Links with mythology colors */
[data-mythology] a:not(.corpus-link):not(.breadcrumb a) {
    color: var(--mythos-secondary);
    transition: color 0.2s ease;
}

[data-mythology] a:not(.corpus-link):not(.breadcrumb a):hover {
    color: var(--mythos-primary);
}

/* Accent borders */
[data-mythology] .accent-border-left {
    border-left: 4px solid var(--mythos-primary);
    padding-left: var(--space-4, 1rem);
}

[data-mythology] .accent-border-top {
    border-top: 4px solid var(--mythos-primary);
    padding-top: var(--space-4, 1rem);
}

/* Mythology badges */
[data-mythology] .mythology-badge {
    background: var(--mythos-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Special effects for interactive elements */
[data-mythology] .interactive-element {
    border: 2px solid var(--mythos-border);
    background: var(--mythos-surface);
    transition: all 0.3s ease;
}

[data-mythology] .interactive-element:hover {
    border-color: var(--mythos-primary);
    box-shadow: 0 0 20px var(--mythos-primary);
}

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

/* Yoruba Mythology - Ancestral traditions of West Africa */
[data-mythology="yoruba"] {
    --mythos-primary: #DAA520;          /* Savanna gold */
    --mythos-secondary: #FF8C00;        /* Sunset orange */
    --mythos-accent: #4B0082;           /* Ancestral indigo */
    --mythos-surface: rgba(218, 165, 32, 0.1);
    --mythos-border: rgba(218, 165, 32, 0.3);
    --mythos-gradient-start: #DAA520;
    --mythos-gradient-end: #FF8C00;
}

@media (max-width: 768px) {
    [data-mythology] .deity-header,
    [data-mythology] .entity-header,
    [data-mythology] .hero-section {
        padding: var(--space-8, 2rem) var(--space-4, 1rem);
    }

    [data-mythology] .deity-icon,
    [data-mythology] .entity-icon,
    [data-mythology] .hero-icon-display {
        font-size: var(--text-5xl, 3rem);
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    [data-mythology] .deity-header,
    [data-mythology] .entity-header {
        background: none;
        color: black;
        border: 2px solid var(--mythos-primary);
    }

    [data-mythology] .attribute-card,
    [data-mythology] .glass-card {
        border: 1px solid var(--mythos-border);
        background: none;
    }
}