/* public/assets/css/fantasy-theme.css - Fantasy Color Palettes & Crystal Styling */

/* =========================================================================
   DARK THEME (Default / Enchanted Dark Crystal Realm)
   ========================================================================= */
:root, [data-theme="dark"] {
    --bg-primary: #090a0f;
    --bg-secondary: #11141c;
    --bg-card: rgba(18, 22, 32, 0.75);
    --bg-card-hover: rgba(26, 32, 48, 0.85);
    --bg-glass: rgba(14, 18, 26, 0.7);
    --bg-glass-nav: rgba(9, 10, 15, 0.75);

    --text-primary: #e2e4ea;
    --text-secondary: #9ea5b8;
    --text-muted: #676e82;
    --text-heading: #ffffff;

    --gold-primary: #d4af37;
    --gold-accent: #f3c74d;
    --gold-pale: #fff3b0;
    --gold-glow: rgba(243, 199, 77, 0.25);
    --gold-glow-strong: rgba(243, 199, 77, 0.45);
    --gold-hover: #ffe478;

    --crystal-border: rgba(212, 175, 55, 0.22);
    --crystal-border-hover: rgba(243, 199, 77, 0.55);
    --crystal-surface: linear-gradient(135deg, rgba(255, 243, 176, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%);
    --crystal-highlight: rgba(255, 243, 176, 0.15);

    --status-active: #4ade80;
    --status-active-glow: rgba(74, 222, 128, 0.25);
    --status-dev: #38bdf8;
    --status-maint: #fbbf24;
    --status-archived: #94a3b8;

    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-crystal: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 15px var(--gold-glow);
    --shadow-glow: 0 0 25px var(--gold-glow-strong);

    --noise-opacity: 0.035;
}

/* =========================================================================
   LIGHT THEME (Sunlit Radiant Crystal Environment)
   ========================================================================= */
[data-theme="light"] {
    --bg-primary: #f8f7f2;
    --bg-secondary: #ede9dc;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.78);
    --bg-glass-nav: rgba(248, 247, 242, 0.82);

    --text-primary: #2d3139;
    --text-secondary: #5a6272;
    --text-muted: #8891a4;
    --text-heading: #14171d;

    --gold-primary: #b8860b;
    --gold-accent: #c49216;
    --gold-pale: #fff8dc;
    --gold-glow: rgba(184, 134, 11, 0.18);
    --gold-glow-strong: rgba(184, 134, 11, 0.35);
    --gold-hover: #9c7106;

    --crystal-border: rgba(184, 134, 11, 0.25);
    --crystal-border-hover: rgba(184, 134, 11, 0.6);
    --crystal-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 220, 0.4) 100%);
    --crystal-highlight: rgba(184, 134, 11, 0.08);

    --status-active: #16a34a;
    --status-active-glow: rgba(22, 163, 74, 0.2);
    --status-dev: #0284c7;
    --status-maint: #d97706;
    --status-archived: #64748b;

    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-crystal: 0 8px 30px rgba(184, 134, 11, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px var(--gold-glow);

    --noise-opacity: 0.015;
}

/* Background Atmosphere & Ambient Crystals */
.ambient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.ambient-glow-1 {
    position: absolute;
    top: -15%;
    right: 5%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, var(--gold-glow) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
}

.ambient-glow-2 {
    position: absolute;
    bottom: 10%;
    left: -10%;
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, var(--gold-glow) 0%, rgba(0, 0, 0, 0) 65%);
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.4;
}

/* Crystal Glass Card Base */
.crystal-card {
    background: var(--bg-card);
    background-image: var(--crystal-surface);
    border: 1px solid var(--crystal-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    box-shadow: var(--shadow-subtle);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.crystal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-pale), transparent);
    opacity: 0.4;
}

.crystal-card:hover {
    border-color: var(--crystal-border-hover);
    box-shadow: var(--shadow-crystal);
    transform: translateY(-3px);
}

/* Gold Gradient Heading Accent */
.gold-gradient-text {
    background: linear-gradient(135deg, var(--gold-pale) 0%, var(--gold-accent) 50%, var(--gold-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Crystal Divider */
.crystal-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
    opacity: 0.7;
}

.crystal-divider::before, .crystal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--crystal-border), transparent);
}

.crystal-divider-gem {
    width: 12px;
    height: 12px;
    background: var(--gold-accent);
    transform: rotate(45deg);
    margin: 0 1rem;
    box-shadow: 0 0 8px var(--gold-glow-strong);
}