/*
Theme Name: Astra Child - MISTIARA
Theme URI: https://mistiara.com
Template: astra
Author: Mistiara Luxury
Description: Bespoke luxury child theme for Mistiara Fine Jewelry
Version: 1.0.0
Text Domain: astra-child
*/

/* ==========================================================================
   1. GLOBAL LUXURY DESIGN SYSTEM (CSS VARIABLES)
   ========================================================================== */

:root,
[data-theme="dark"] {
  --mist-bg-body: #070707;
  --mist-bg-surface: #111111;
  --mist-bg-card: #171717;
  --mist-gold-primary: #D4AF37;
  --mist-gold-light: #F7E7A9;
  --mist-gold-dark: #996515;
  --mist-gold-glow: rgba(212, 175, 55, 0.25);
  --mist-text-primary: #F5F5F5;
  --mist-text-secondary: #A0A0A0;
  --mist-border: rgba(212, 175, 55, 0.22);
  --mist-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
}

[data-theme="light"] {
  --mist-bg-body: #FAF9F6;
  --mist-bg-surface: #FFFFFF;
  --mist-bg-card: #F4F1EA;
  --mist-gold-primary: #AA771C;
  --mist-gold-light: #C59B27;
  --mist-gold-dark: #7A530E;
  --mist-gold-glow: rgba(170, 119, 28, 0.20);
  --mist-text-primary: #141414;
  --mist-text-secondary: #555555;
  --mist-border: rgba(170, 119, 28, 0.22);
  --mist-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   2. TYPOGRAPHY & ASTRA OVERRIDES
   ========================================================================== */

html, body {
  background-color: var(--mist-bg-body) !important;
  color: var(--mist-text-primary) !important;
  font-family: 'Montserrat', sans-serif !important;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Astra Containers & Backgrounds Override */
.site,
#page,
.site-content,
.ast-container,
#masthead,
.main-header-bar,
.ast-theme-transparent-header #masthead,
.ast-header-break-point .main-header-bar {
  background-color: var(--mist-bg-body) !important;
  color: var(--mist-text-primary) !important;
  border-color: var(--mist-border) !important;
}

/* Editorial Serif Typography for Luxury Titles */
h1, h2, h3, h4, h5, h6,
.site-title,
.site-title a,
.entry-title,
.entry-title a,
.ast-archive-description .ast-archive-title {
  font-family: 'Cinzel', Georgia, serif !important;
  color: var(--mist-text-primary) !important;
  letter-spacing: 0.08em;
  font-weight: 600;
}

p, span, li, a, input, button, select, textarea {
  font-family: 'Montserrat', sans-serif;
}

a {
  color: var(--mist-gold-primary);
  transition: color 0.3s ease;
}

a:hover,
.main-header-menu a:hover,
.main-header-menu .current-menu-item > a {
  color: var(--mist-gold-light) !important;
}

/* ==========================================================================
   3. BESPOKE FLOATING LUXURY THEME SWITCHER
   ========================================================================== */

.mistiara-floating-toggle-wrapper {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 999999;
}

.mistiara-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mist-bg-surface);
  color: var(--mist-gold-primary);
  border: 1px solid var(--mist-border);
  padding: 9px 16px;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: var(--mist-shadow), 0 0 15px var(--mist-gold-glow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.mistiara-theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--mist-gold-primary);
  box-shadow: 0 12px 25px var(--mist-gold-glow);
}

.mistiara-theme-toggle .toggle-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--mist-text-primary);
}

.mistiara-theme-toggle .theme-icon {
  display: inline-block;
  vertical-align: middle;
  stroke: var(--mist-gold-primary);
  transition: transform 0.4s ease;
}

.mistiara-theme-toggle:hover .theme-icon {
  transform: rotate(30deg);
}

/* Icon visibility logic based on active mode */
[data-theme="dark"] .mistiara-theme-toggle .icon-moon {
  display: none;
}
[data-theme="dark"] .mistiara-theme-toggle .icon-sun {
  display: inline-block;
}

[data-theme="light"] .mistiara-theme-toggle .icon-sun {
  display: none;
}
[data-theme="light"] .mistiara-theme-toggle .icon-moon {
  display: inline-block;
}