/* =========================================================
   Joom — selectable site themes (Admin → Themes)
   ---------------------------------------------------------
   10 full palettes, each a :root[data-theme="key"] block that
   redefines every token the base style.css consumes (same
   token contract as the existing :root[data-theme="dark"] /
   [data-theme="light"] blocks in style.css — this file doesn't
   touch those, it just adds more values for the same attribute).

   "warm_dusk" mirrors the base :root in style.css exactly, so
   picking it back after trying another theme is a true no-op —
   it also keeps the original photographic aurora background,
   which was tuned specifically for its rose/orchid palette.

   Every other theme swaps that static photo for an animated
   gradient wash (see "ANIMATED BACKGROUND" below) so a dark or
   cool-toned theme never clashes with a warm pink/orange photo.
   All motion in this file is gated behind
   prefers-reduced-motion, matching the guard already declared
   once, globally, in style.css.
   ========================================================= */

:root[data-theme="warm_dusk"] {
  --bg: #FFF4EF;
  --bg-deep: #FBEAE6;
  --surface: #FFFFFF;
  --primary: #F4436C;
  --primary-dark: #D62F58;
  --orchid: #A855F7;
  --grad: linear-gradient(135deg, #F4436C 0%, #E9407F 55%, #A855F7 100%);
  --grad-soft: linear-gradient(135deg, #FFE3E9, #F3E6FF);
  --ink: #33202F;
  --muted: #7D6B81;
  --line: #F6E3E8;
  --mint: #37C99A;
  --gold: #FFB84D;
  --lavender: #8E7CC3;
  --shadow-card: 0 10px 30px rgba(51, 32, 47, 0.14);
  --shadow-soft: 0 3px 14px rgba(51, 32, 47, 0.07);
  --shadow-rose: 0 8px 22px rgba(244, 67, 108, 0.32);
  --shadow-elevated: 0 26px 60px rgba(51, 32, 47, 0.20), 0 8px 20px rgba(51, 32, 47, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --chip-violet-bg: #F3E8FF;
  --chip-violet-ink: #7C3AED;
  --chip-gold-bg: linear-gradient(135deg, #FFF3D6, #FFE3AE);
  --chip-gold-ink: #8F5D00;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #F0B429;
  --tier-platinum-bg: #E8ECFF;
  --tier-platinum-border: #B983FF;
}

:root[data-theme="midnight_noir"] {
  --bg: #14101B;
  --bg-deep: #1A1424;
  --surface: #221B2E;
  --primary: #FF3D81;
  --primary-dark: #E01F68;
  --orchid: #8B5CF6;
  --grad: linear-gradient(135deg, #FF3D81 0%, #C026D3 55%, #8B5CF6 100%);
  --grad-soft: linear-gradient(135deg, #2E1830, #241A3D);
  --ink: #F3EAFB;
  --muted: #B6A6C9;
  --line: #362A46;
  --mint: #34E5B0;
  --gold: #FFCB6B;
  --lavender: #B79CF0;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 3px 14px rgba(0, 0, 0, 0.32);
  --shadow-rose: 0 8px 22px rgba(255, 61, 129, 0.4);
  --shadow-elevated: 0 26px 60px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.36);
  --surface-glass: rgba(34, 27, 46, 0.62);
  --chip-violet-bg: #362448;
  --chip-violet-ink: #D9BCFF;
  --chip-gold-bg: linear-gradient(135deg, #4A3A1E, #3E2F14);
  --chip-gold-ink: #FFD37A;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #FFCB6B;
  --tier-platinum-bg: #2C2540;
  --tier-platinum-border: #B79CF0;
}

:root[data-theme="ocean_breeze"] {
  --bg: #EAFBFB;
  --bg-deep: #DDF4F6;
  --surface: #FFFFFF;
  --primary: #0EA5B7;
  --primary-dark: #0A7F8E;
  --orchid: #2563EB;
  --grad: linear-gradient(135deg, #0EA5B7 0%, #22B8CF 50%, #2563EB 100%);
  --grad-soft: linear-gradient(135deg, #D7F6F8, #DCE8FF);
  --ink: #0B2F35;
  --muted: #4E7C82;
  --line: #CDEEF1;
  --mint: #22C58D;
  --gold: #F5A524;
  --lavender: #7C93E3;
  --shadow-card: 0 10px 30px rgba(11, 47, 53, 0.14);
  --shadow-soft: 0 3px 14px rgba(11, 47, 53, 0.08);
  --shadow-rose: 0 8px 22px rgba(14, 165, 183, 0.32);
  --shadow-elevated: 0 26px 60px rgba(11, 47, 53, 0.20), 0 8px 20px rgba(11, 47, 53, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --chip-violet-bg: #E4EBFF;
  --chip-violet-ink: #2545C6;
  --chip-gold-bg: linear-gradient(135deg, #FEF0D6, #FCE0AE);
  --chip-gold-ink: #8F5D00;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #F5A524;
  --tier-platinum-bg: #E4EBFF;
  --tier-platinum-border: #7C93E3;
}

:root[data-theme="sunset_coral"] {
  --bg: #FFF0E8;
  --bg-deep: #FFE3D6;
  --surface: #FFFFFF;
  --primary: #FF6B4A;
  --primary-dark: #E44E2E;
  --orchid: #FF4D8D;
  --grad: linear-gradient(135deg, #FF6B4A 0%, #FF4D8D 55%, #FFB84D 100%);
  --grad-soft: linear-gradient(135deg, #FFE1D2, #FFE0EC);
  --ink: #3A211A;
  --muted: #8A6155;
  --line: #FBD9C8;
  --mint: #2FBF8F;
  --gold: #FFB84D;
  --lavender: #C98BB8;
  --shadow-card: 0 10px 30px rgba(58, 33, 26, 0.14);
  --shadow-soft: 0 3px 14px rgba(58, 33, 26, 0.08);
  --shadow-rose: 0 8px 22px rgba(255, 107, 74, 0.34);
  --shadow-elevated: 0 26px 60px rgba(58, 33, 26, 0.20), 0 8px 20px rgba(58, 33, 26, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --chip-violet-bg: #FFE1EE;
  --chip-violet-ink: #C22A6C;
  --chip-gold-bg: linear-gradient(135deg, #FFF0D6, #FFDFAE);
  --chip-gold-ink: #8F5D00;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #FFB84D;
  --tier-platinum-bg: #FFE1EE;
  --tier-platinum-border: #FF4D8D;
}

:root[data-theme="lavender_dream"] {
  --bg: #F6F1FF;
  --bg-deep: #EFE6FF;
  --surface: #FFFFFF;
  --primary: #9B6BFF;
  --primary-dark: #7C4DE0;
  --orchid: #C77DFF;
  --grad: linear-gradient(135deg, #9B6BFF 0%, #C77DFF 55%, #FF8FD8 100%);
  --grad-soft: linear-gradient(135deg, #EBE0FF, #FCE4FA);
  --ink: #2E2444;
  --muted: #7C6E96;
  --line: #E3D7FA;
  --mint: #3FC9A0;
  --gold: #F0B429;
  --lavender: #9B6BFF;
  --shadow-card: 0 10px 30px rgba(46, 36, 68, 0.14);
  --shadow-soft: 0 3px 14px rgba(46, 36, 68, 0.08);
  --shadow-rose: 0 8px 22px rgba(155, 107, 255, 0.32);
  --shadow-elevated: 0 26px 60px rgba(46, 36, 68, 0.20), 0 8px 20px rgba(46, 36, 68, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --chip-violet-bg: #EDE1FF;
  --chip-violet-ink: #6B3FD6;
  --chip-gold-bg: linear-gradient(135deg, #FBF0D6, #F7E0AE);
  --chip-gold-ink: #8F5D00;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #F0B429;
  --tier-platinum-bg: #EDE1FF;
  --tier-platinum-border: #C77DFF;
}

:root[data-theme="emerald_forest"] {
  --bg: #EFFAF3;
  --bg-deep: #E1F3E7;
  --surface: #FFFFFF;
  --primary: #16A567;
  --primary-dark: #0E7F4F;
  --orchid: #3FBF8F;
  --grad: linear-gradient(135deg, #16A567 0%, #3FBF8F 55%, #F0B429 100%);
  --grad-soft: linear-gradient(135deg, #DFF5E8, #FFF3D6);
  --ink: #173327;
  --muted: #5C7B6C;
  --line: #D3EEDC;
  --mint: #16A567;
  --gold: #F0B429;
  --lavender: #6B9C8A;
  --shadow-card: 0 10px 30px rgba(23, 51, 39, 0.14);
  --shadow-soft: 0 3px 14px rgba(23, 51, 39, 0.08);
  --shadow-rose: 0 8px 22px rgba(22, 165, 103, 0.32);
  --shadow-elevated: 0 26px 60px rgba(23, 51, 39, 0.20), 0 8px 20px rgba(23, 51, 39, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --chip-violet-bg: #DCF3E9;
  --chip-violet-ink: #0E7F4F;
  --chip-gold-bg: linear-gradient(135deg, #FBF0D6, #F7E0AE);
  --chip-gold-ink: #8F5D00;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #F0B429;
  --tier-platinum-bg: #DCF3E9;
  --tier-platinum-border: #3FBF8F;
}

:root[data-theme="rose_gold"] {
  --bg: #FFF6F0;
  --bg-deep: #FCEAE0;
  --surface: #FFFFFF;
  --primary: #E8927C;
  --primary-dark: #C96F58;
  --orchid: #D4A373;
  --grad: linear-gradient(135deg, #E8927C 0%, #D4A373 55%, #F4C77B 100%);
  --grad-soft: linear-gradient(135deg, #FCE7DD, #FBEED9);
  --ink: #402A22;
  --muted: #8C6F62;
  --line: #F2DED1;
  --mint: #3FBF9C;
  --gold: #F4C77B;
  --lavender: #C6A0B0;
  --shadow-card: 0 10px 30px rgba(64, 42, 34, 0.14);
  --shadow-soft: 0 3px 14px rgba(64, 42, 34, 0.08);
  --shadow-rose: 0 8px 22px rgba(232, 146, 124, 0.34);
  --shadow-elevated: 0 26px 60px rgba(64, 42, 34, 0.20), 0 8px 20px rgba(64, 42, 34, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --chip-violet-bg: #F3E3DC;
  --chip-violet-ink: #A6664F;
  --chip-gold-bg: linear-gradient(135deg, #FBEED9, #F6DEB4);
  --chip-gold-ink: #8F5D00;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #F4C77B;
  --tier-platinum-bg: #F3E3DC;
  --tier-platinum-border: #D4A373;
}

:root[data-theme="cyber_neon"] {
  --bg: #0A0E17;
  --bg-deep: #0F1420;
  --surface: #161C2C;
  --primary: #00E5FF;
  --primary-dark: #00B8CC;
  --orchid: #FF2FD0;
  --grad: linear-gradient(135deg, #00E5FF 0%, #7C3AED 55%, #FF2FD0 100%);
  --grad-soft: linear-gradient(135deg, #132030, #1E1030);
  --ink: #E8FBFF;
  --muted: #8FA3B8;
  --line: #233047;
  --mint: #39FFC7;
  --gold: #FFD23F;
  --lavender: #B18CFF;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 3px 14px rgba(0, 0, 0, 0.35);
  --shadow-rose: 0 8px 26px rgba(0, 229, 255, 0.45);
  --shadow-elevated: 0 26px 60px rgba(0, 0, 0, 0.65), 0 8px 20px rgba(0, 0, 0, 0.4);
  --surface-glass: rgba(22, 28, 44, 0.62);
  --chip-violet-bg: #241A3D;
  --chip-violet-ink: #E29AFF;
  --chip-gold-bg: linear-gradient(135deg, #3A3010, #2E2408);
  --chip-gold-ink: #FFD23F;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #FFD23F;
  --tier-platinum-bg: #1A2438;
  --tier-platinum-border: #00E5FF;
}

:root[data-theme="mono_elegance"] {
  --bg: #F7F7F8;
  --bg-deep: #ECECEE;
  --surface: #FFFFFF;
  --primary: #E23D4E;
  --primary-dark: #B92C3C;
  --orchid: #333333;
  --grad: linear-gradient(135deg, #111114 0%, #3A3A42 55%, #E23D4E 100%);
  --grad-soft: linear-gradient(135deg, #EDEDEF, #F5E4E6);
  --ink: #101012;
  --muted: #6B6B73;
  --line: #E2E2E6;
  --mint: #2FB37C;
  --gold: #C9A227;
  --lavender: #8A8A94;
  --shadow-card: 0 10px 30px rgba(16, 16, 18, 0.14);
  --shadow-soft: 0 3px 14px rgba(16, 16, 18, 0.08);
  --shadow-rose: 0 8px 22px rgba(226, 61, 78, 0.28);
  --shadow-elevated: 0 26px 60px rgba(16, 16, 18, 0.20), 0 8px 20px rgba(16, 16, 18, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --chip-violet-bg: #E7E7EA;
  --chip-violet-ink: #333333;
  --chip-gold-bg: linear-gradient(135deg, #F3EBD6, #EADEB0);
  --chip-gold-ink: #6B5300;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #C9A227;
  --tier-platinum-bg: #E7E7EA;
  --tier-platinum-border: #6B6B73;
}

:root[data-theme="golden_hour"] {
  --bg: #FFF8EC;
  --bg-deep: #FFEFD6;
  --surface: #FFFFFF;
  --primary: #F2994A;
  --primary-dark: #D97A2B;
  --orchid: #F45B69;
  --grad: linear-gradient(135deg, #F2994A 0%, #F45B69 55%, #FFD166 100%);
  --grad-soft: linear-gradient(135deg, #FFEAD1, #FFE1DE);
  --ink: #3E2A14;
  --muted: #8C7355;
  --line: #F5E1C0;
  --mint: #2FBF8F;
  --gold: #FFD166;
  --lavender: #D69B9B;
  --shadow-card: 0 10px 30px rgba(62, 42, 20, 0.14);
  --shadow-soft: 0 3px 14px rgba(62, 42, 20, 0.08);
  --shadow-rose: 0 8px 22px rgba(242, 153, 74, 0.34);
  --shadow-elevated: 0 26px 60px rgba(62, 42, 20, 0.20), 0 8px 20px rgba(62, 42, 20, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --chip-violet-bg: #FDE4E1;
  --chip-violet-ink: #C23B4A;
  --chip-gold-bg: linear-gradient(135deg, #FFF0D0, #FFDE9E);
  --chip-gold-ink: #8F5D00;
  --tier-gold-bg: var(--chip-gold-bg);
  --tier-gold-border: #FFD166;
  --tier-platinum-bg: #FDE4E1;
  --tier-platinum-border: #F45B69;
}

/* =========================================================
   ANIMATED BACKGROUND — every theme except warm_dusk (which
   keeps the original photographic aurora background it was
   designed around) gets a slow-drifting gradient wash instead,
   so no theme ever shows a warm pink/orange photo clashing with
   a cool or dark palette.
   ========================================================= */
:root[data-theme]:not([data-theme="warm_dusk"]) .phone {
  background:
    linear-gradient(135deg, transparent 0%, transparent 100%),
    var(--grad-soft), var(--bg);
  background-size: 100% 100%, 260% 260%, 100% 100%;
  animation: joom-theme-drift 20s ease-in-out infinite alternate;
}

@keyframes joom-theme-drift {
  0%   { background-position: 0 0, 0% 30%, 0 0; }
  100% { background-position: 0 0, 100% 70%, 0 0; }
}

/* =========================================================
   AMBIENT FLOATING BLOBS — a soft, blurred, slowly-drifting
   trio of theme-colored circles behind every page's content.
   Markup: <div class="theme-fx-blobs" aria-hidden="true">
             <span></span><span></span><span></span>
           </div>
   injected once in includes/header.php, right after .phone opens.
   ========================================================= */
.theme-fx-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.theme-fx-blobs span {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.22;
  will-change: transform;
}
.theme-fx-blobs span:nth-child(1) {
  background: var(--primary);
  top: -60px;
  left: -60px;
  animation: joom-blob-a 22s ease-in-out infinite alternate;
}
.theme-fx-blobs span:nth-child(2) {
  background: var(--orchid);
  bottom: 12%;
  right: -80px;
  animation: joom-blob-b 26s ease-in-out infinite alternate;
}
.theme-fx-blobs span:nth-child(3) {
  background: var(--gold);
  bottom: -80px;
  left: 30%;
  animation: joom-blob-c 30s ease-in-out infinite alternate;
}
/* Dark themes need a touch more visible glow against a black ground. */
:root[data-theme="midnight_noir"] .theme-fx-blobs span,
:root[data-theme="cyber_neon"] .theme-fx-blobs span {
  opacity: 0.38;
}

@keyframes joom-blob-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 60px) scale(1.15); } }
@keyframes joom-blob-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-50px, -30px) scale(1.1); } }
@keyframes joom-blob-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, -50px) scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .phone,
  .theme-fx-blobs span {
    animation: none !important;
  }
}

/* =========================================================
   Live-preview transition — toggled only by admin/themes.php's
   JS while previewing a swatch, so switching themes there
   cross-fades instead of hard-cutting. Never applied on normal
   page loads (site pages just render server-side with the
   chosen theme already baked into data-theme on <html>).
   ========================================================= */
.theme-preview-transition,
.theme-preview-transition * {
  transition: background-color .35s ease, background-image .35s ease,
              border-color .35s ease, color .25s ease, box-shadow .35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-preview-transition,
  .theme-preview-transition * {
    transition: none !important;
  }
}