/* ============================================================================
   W STUDIOS VOICE — LUXURY LIGHT THEME LAYER
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css and mobile-fixes.css so it has the final cascade say.
   Everything here is scoped to the four LIGHT luxury gradients:
       white  (flagship)   gold   green   pink
   The original dark themes (blue / purple / ice) are NOT touched.
   No markup or behaviour is changed — this only re-skins existing selectors.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. SHARED LIGHT FAMILY TOKENS
   Maps the luxury palette onto the variables the whole app already consumes.
---------------------------------------------------------------------------- */
body[data-gradient="white"],
body[data-gradient="gold"],
body[data-gradient="green"],
body[data-gradient="pink"] {
    color-scheme: light;

    /* neutral surfaces */
    --lux-bg:        #f6f5f2;   /* page / ivory */
    --lux-bg-2:      #ffffff;   /* sidebar, topbar, cards */
    --lux-bg-3:      #efece6;   /* recessed surfaces */
    --lux-ink:       #1b1b22;   /* primary text */
    --lux-ink-2:     #565663;   /* secondary text */
    --lux-ink-3:     #9a9aa6;   /* muted text */
    --lux-line:      rgba(22, 22, 33, 0.10);
    --lux-line-soft: rgba(22, 22, 33, 0.055);
    --lux-card:      rgba(255, 255, 255, 0.74);

    /* layered, soft luxury shadows (no harsh blacks) */
    --lux-shadow-sm: 0 1px 2px rgba(20, 20, 45, 0.04), 0 2px 8px rgba(20, 20, 45, 0.05);
    --lux-shadow:    0 4px 14px rgba(20, 20, 45, 0.06), 0 14px 36px rgba(20, 20, 45, 0.07);
    --lux-shadow-lg: 0 12px 32px rgba(20, 20, 45, 0.10), 0 34px 80px rgba(20, 20, 45, 0.12);

    /* re-map the app's core tokens onto the luxury palette */
    --bg-primary:    var(--lux-bg)        !important;
    --bg-secondary:  var(--lux-bg-2)      !important;
    --bg-tertiary:   var(--lux-bg-3)      !important;
    --bg-card:       var(--lux-card)      !important;
    --bg-hover:      var(--lux-accent-wash) !important;
    --text-primary:  var(--lux-ink)       !important;
    --text-secondary:var(--lux-ink-2)     !important;
    --text-muted:    var(--lux-ink-3)     !important;
    --border:        var(--lux-line)      !important;
    --border-gold:   var(--lux-accent-line) !important;
    --shadow:        var(--lux-shadow)    !important;
    --shadow-gold:   var(--lux-accent-glow) !important;

    --gold:          var(--lux-accent)     !important;
    --gold-light:    var(--lux-accent-soft)!important;
    --gold-dark:     var(--lux-accent-deep)!important;
    --gold-gradient: var(--lux-accent-grad)!important;
    --gold-glow:     var(--lux-accent-glow)!important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------------------
   2. PER-THEME ACCENT IDENTITIES
---------------------------------------------------------------------------- */

/* WHITE — monochrome onyx on ivory (flagship, ultra-clean) */
body[data-gradient="white"] {
    --lux-bg:   #f7f6f2;
    --lux-bg-3: #eeebe4;
    --lux-accent:      #23232c;
    --lux-accent-soft: #6f6f7c;
    --lux-accent-deep: #101015;
    --lux-accent-grad: linear-gradient(135deg, #33333e 0%, #16161c 55%, #2c2c36 100%);
    --lux-accent-wash: rgba(20, 20, 30, 0.05);
    --lux-accent-line: rgba(20, 20, 30, 0.16);
    --lux-accent-glow: 0 10px 30px rgba(15, 15, 28, 0.16);
    --lux-on-accent:   #f8f7f3;
    --lux-tint:        rgba(20, 20, 30, 0.04);
}

/* GOLD — champagne on white */
body[data-gradient="gold"] {
    --lux-accent:      #b0893a;
    --lux-accent-soft: #e6cd86;
    --lux-accent-deep: #876521;
    --lux-accent-grad: linear-gradient(135deg, #e3c476 0%, #b0893a 52%, #8a6a26 100%);
    --lux-accent-wash: rgba(176, 137, 58, 0.10);
    --lux-accent-line: rgba(176, 137, 58, 0.32);
    --lux-accent-glow: 0 10px 30px rgba(176, 137, 58, 0.22);
    --lux-on-accent:   #2c2310;
    --lux-tint:        rgba(176, 137, 58, 0.06);
}

/* GREEN — emerald on white */
body[data-gradient="green"] {
    --lux-accent:      #129069;
    --lux-accent-soft: #54c79c;
    --lux-accent-deep: #0b6a4c;
    --lux-accent-grad: linear-gradient(135deg, #2cb585 0%, #129069 52%, #0b6a4c 100%);
    --lux-accent-wash: rgba(18, 144, 105, 0.10);
    --lux-accent-line: rgba(18, 144, 105, 0.30);
    --lux-accent-glow: 0 10px 30px rgba(18, 144, 105, 0.22);
    --lux-on-accent:   #ffffff;
    --lux-tint:        rgba(18, 144, 105, 0.06);
}

/* PINK — rosé on white */
body[data-gradient="pink"] {
    --lux-accent:      #d05c8c;
    --lux-accent-soft: #f2a4c4;
    --lux-accent-deep: #a83e6c;
    --lux-accent-grad: linear-gradient(135deg, #e87aa6 0%, #d05c8c 52%, #a83e6c 100%);
    --lux-accent-wash: rgba(208, 92, 140, 0.10);
    --lux-accent-line: rgba(208, 92, 140, 0.30);
    --lux-accent-glow: 0 10px 30px rgba(208, 92, 140, 0.22);
    --lux-on-accent:   #ffffff;
    --lux-tint:        rgba(208, 92, 140, 0.06);
}

/* ----------------------------------------------------------------------------
   3. ROOT / DOCUMENT BACKGROUND
   The <head> hardcodes html,body { background:#030304 }. Override for light.
---------------------------------------------------------------------------- */
html:has(body[data-gradient="white"]),
html:has(body[data-gradient="gold"]),
html:has(body[data-gradient="green"]),
html:has(body[data-gradient="pink"]) { background: #f3f1ec !important; }

body[data-gradient="white"],
body[data-gradient="gold"],
body[data-gradient="green"],
body[data-gradient="pink"] {
    background: var(--lux-bg) !important;
    color: var(--lux-ink) !important;
}

/* ----------------------------------------------------------------------------
   4. APP BACKDROP — subtle luxury depth (theme-tinted ambient glow)
---------------------------------------------------------------------------- */
body[data-gradient="white"] .main-content,
body[data-gradient="gold"]  .main-content,
body[data-gradient="green"] .main-content,
body[data-gradient="pink"]  .main-content {
    background:
        radial-gradient(1100px 460px at 82% -12%, var(--lux-accent-wash), transparent 60%),
        radial-gradient(900px 520px at 8% 108%, var(--lux-tint), transparent 62%),
        var(--lux-bg) !important;
}

body[data-gradient="white"] .page-wrapper,
body[data-gradient="gold"]  .page-wrapper,
body[data-gradient="green"] .page-wrapper,
body[data-gradient="pink"]  .page-wrapper { background: transparent !important; }

/* ----------------------------------------------------------------------------
   5. SIDEBAR
---------------------------------------------------------------------------- */
body[data-gradient="white"] .sidebar,
body[data-gradient="gold"]  .sidebar,
body[data-gradient="green"] .sidebar,
body[data-gradient="pink"]  .sidebar {
    background: var(--lux-bg-2) !important;
    border-right: 1px solid var(--lux-line) !important;
    box-shadow: 1px 0 0 var(--lux-line-soft), 16px 0 44px rgba(20, 20, 45, 0.05) !important;
}

body[data-gradient="white"] .sidebar-header,
body[data-gradient="gold"]  .sidebar-header,
body[data-gradient="green"] .sidebar-header,
body[data-gradient="pink"]  .sidebar-header,
body[data-gradient="white"] .sidebar-user,
body[data-gradient="gold"]  .sidebar-user,
body[data-gradient="green"] .sidebar-user,
body[data-gradient="pink"]  .sidebar-user,
body[data-gradient="white"] .sidebar-footer,
body[data-gradient="gold"]  .sidebar-footer,
body[data-gradient="green"] .sidebar-footer,
body[data-gradient="pink"]  .sidebar-footer { border-color: var(--lux-line) !important; }

/* nav grouping cards — replace the white-on-dark overlay with a soft light card */
body[data-gradient="white"] .nav-section,
body[data-gradient="gold"]  .nav-section,
body[data-gradient="green"] .nav-section,
body[data-gradient="pink"]  .nav-section,
body[data-gradient="white"] .nav-section-collapsible,
body[data-gradient="gold"]  .nav-section-collapsible,
body[data-gradient="green"] .nav-section-collapsible,
body[data-gradient="pink"]  .nav-section-collapsible {
    background: var(--lux-bg) !important;
    border: 1px solid var(--lux-line-soft) !important;
    box-shadow: var(--lux-shadow-sm) !important;
}

/* nav items */
body[data-gradient="white"] .nav-item:hover,
body[data-gradient="gold"]  .nav-item:hover,
body[data-gradient="green"] .nav-item:hover,
body[data-gradient="pink"]  .nav-item:hover,
body[data-gradient="white"] .nav-section-toggle:hover,
body[data-gradient="gold"]  .nav-section-toggle:hover,
body[data-gradient="green"] .nav-section-toggle:hover,
body[data-gradient="pink"]  .nav-section-toggle:hover { background: var(--lux-accent-wash) !important; }

body[data-gradient="white"] .nav-item.active,
body[data-gradient="gold"]  .nav-item.active,
body[data-gradient="green"] .nav-item.active,
body[data-gradient="pink"]  .nav-item.active {
    background: var(--lux-accent-wash) !important;
    color: var(--lux-accent) !important;
    border-left: 3px solid var(--lux-accent) !important;
    font-weight: 600 !important;
}

/* ----------------------------------------------------------------------------
   6. TOPBAR
---------------------------------------------------------------------------- */
body[data-gradient="white"] .topbar,
body[data-gradient="gold"]  .topbar,
body[data-gradient="green"] .topbar,
body[data-gradient="pink"]  .topbar {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--lux-line) !important;
}

body[data-gradient="white"] .health-indicator,
body[data-gradient="gold"]  .health-indicator,
body[data-gradient="green"] .health-indicator,
body[data-gradient="pink"]  .health-indicator {
    background: var(--lux-bg-3) !important;
    border: 1px solid var(--lux-line-soft) !important;
}

/* ----------------------------------------------------------------------------
   7. ACCENT FILLS (logo, avatar, credits, buttons)
---------------------------------------------------------------------------- */
body[data-gradient="white"] .logo-icon .material-icons-round,
body[data-gradient="gold"]  .logo-icon .material-icons-round,
body[data-gradient="green"] .logo-icon .material-icons-round,
body[data-gradient="pink"]  .logo-icon .material-icons-round,
body[data-gradient="white"] .user-avatar,
body[data-gradient="gold"]  .user-avatar,
body[data-gradient="green"] .user-avatar,
body[data-gradient="pink"]  .user-avatar { color: var(--lux-on-accent) !important; }

body[data-gradient="white"] .logo-img,
body[data-gradient="gold"]  .logo-img,
body[data-gradient="green"] .logo-img,
body[data-gradient="pink"]  .logo-img {
    border: 1px solid var(--lux-line) !important;
    box-shadow: var(--lux-shadow-sm) !important;
}

body[data-gradient="white"] .credits-display,
body[data-gradient="gold"]  .credits-display,
body[data-gradient="green"] .credits-display,
body[data-gradient="pink"]  .credits-display {
    background: var(--lux-accent-wash) !important;
    border: 1px solid var(--lux-accent-line) !important;
}

/* primary buttons keep the accent gradient but get legible on-accent text */
body[data-gradient="white"] .btn-primary,
body[data-gradient="gold"]  .btn-primary,
body[data-gradient="green"] .btn-primary,
body[data-gradient="pink"]  .btn-primary {
    color: var(--lux-on-accent) !important;
    box-shadow: var(--lux-accent-glow) !important;
}
body[data-gradient="white"] .btn-primary.loading::after,
body[data-gradient="gold"]  .btn-primary.loading::after,
body[data-gradient="green"] .btn-primary.loading::after,
body[data-gradient="pink"]  .btn-primary.loading::after {
    border-color: rgba(255, 255, 255, 0.35) !important;
    border-top-color: var(--lux-on-accent) !important;
}

body[data-gradient="white"] .btn-secondary,
body[data-gradient="gold"]  .btn-secondary,
body[data-gradient="green"] .btn-secondary,
body[data-gradient="pink"]  .btn-secondary {
    background: var(--lux-bg-2) !important;
    border: 1px solid var(--lux-line) !important;
    box-shadow: var(--lux-shadow-sm) !important;
}
body[data-gradient="white"] .btn-secondary:hover,
body[data-gradient="gold"]  .btn-secondary:hover,
body[data-gradient="green"] .btn-secondary:hover,
body[data-gradient="pink"]  .btn-secondary:hover {
    border-color: var(--lux-accent) !important;
    background: var(--lux-accent-wash) !important;
}

/* ----------------------------------------------------------------------------
   8. INPUTS / SELECTS
---------------------------------------------------------------------------- */
body[data-gradient="white"] .input-wrapper,
body[data-gradient="gold"]  .input-wrapper,
body[data-gradient="green"] .input-wrapper,
body[data-gradient="pink"]  .input-wrapper,
body[data-gradient="white"] .setting-selector,
body[data-gradient="gold"]  .setting-selector,
body[data-gradient="green"] .setting-selector,
body[data-gradient="pink"]  .setting-selector,
body[data-gradient="white"] .setting-select,
body[data-gradient="gold"]  .setting-select,
body[data-gradient="green"] .setting-select,
body[data-gradient="pink"]  .setting-select,
body[data-gradient="white"] .input-field,
body[data-gradient="gold"]  .input-field,
body[data-gradient="green"] .input-field,
body[data-gradient="pink"]  .input-field {
    background: var(--lux-bg-2) !important;
    border: 1px solid var(--lux-line) !important;
    box-shadow: var(--lux-shadow-sm) !important;
}
body[data-gradient="white"] .input-wrapper:focus-within,
body[data-gradient="gold"]  .input-wrapper:focus-within,
body[data-gradient="green"] .input-wrapper:focus-within,
body[data-gradient="pink"]  .input-wrapper:focus-within,
body[data-gradient="white"] .setting-select:focus,
body[data-gradient="gold"]  .setting-select:focus,
body[data-gradient="green"] .setting-select:focus,
body[data-gradient="pink"]  .setting-select:focus,
body[data-gradient="white"] .input-field:focus,
body[data-gradient="gold"]  .input-field:focus,
body[data-gradient="green"] .input-field:focus,
body[data-gradient="pink"]  .input-field:focus {
    border-color: var(--lux-accent) !important;
    background: var(--lux-bg-2) !important;
    box-shadow: 0 2px 8px rgba(20, 20, 45, 0.06),
                0 0 0 3px var(--lux-accent-wash),
                var(--lux-accent-glow) !important;
}

/* ----------------------------------------------------------------------------
   9. CARDS — soften the heavy black drop-shadows for light surfaces
---------------------------------------------------------------------------- */
body[data-gradient="white"] .history-card,
body[data-gradient="gold"]  .history-card,
body[data-gradient="green"] .history-card,
body[data-gradient="pink"]  .history-card,
body[data-gradient="white"] .audio-card,
body[data-gradient="gold"]  .audio-card,
body[data-gradient="green"] .audio-card,
body[data-gradient="pink"]  .audio-card,
body[data-gradient="white"] .voice-card,
body[data-gradient="gold"]  .voice-card,
body[data-gradient="green"] .voice-card,
body[data-gradient="pink"]  .voice-card,
body[data-gradient="white"] .sf-ah-card,
body[data-gradient="gold"]  .sf-ah-card,
body[data-gradient="green"] .sf-ah-card,
body[data-gradient="pink"]  .sf-ah-card {
    background: var(--lux-bg-2) !important;
    border: 1px solid var(--lux-line) !important;
    box-shadow: var(--lux-shadow) !important;
}
body[data-gradient="white"] .history-card:hover,
body[data-gradient="gold"]  .history-card:hover,
body[data-gradient="green"] .history-card:hover,
body[data-gradient="pink"]  .history-card:hover,
body[data-gradient="white"] .audio-card:hover,
body[data-gradient="gold"]  .audio-card:hover,
body[data-gradient="green"] .audio-card:hover,
body[data-gradient="pink"]  .audio-card:hover,
body[data-gradient="white"] .voice-card:hover,
body[data-gradient="gold"]  .voice-card:hover,
body[data-gradient="green"] .voice-card:hover,
body[data-gradient="pink"]  .voice-card:hover,
body[data-gradient="white"] .sf-ah-card:hover,
body[data-gradient="gold"]  .sf-ah-card:hover,
body[data-gradient="green"] .sf-ah-card:hover,
body[data-gradient="pink"]  .sf-ah-card:hover {
    border-color: var(--lux-accent-line) !important;
    box-shadow: var(--lux-shadow-lg), 0 0 0 1px var(--lux-accent-wash) !important;
}

/* ----------------------------------------------------------------------------
   10. MODALS — lighter scrim + clean light sheet
---------------------------------------------------------------------------- */
body[data-gradient="white"] .modal-overlay,
body[data-gradient="gold"]  .modal-overlay,
body[data-gradient="green"] .modal-overlay,
body[data-gradient="pink"]  .modal-overlay,
body[data-gradient="white"] .overlay,
body[data-gradient="gold"]  .overlay,
body[data-gradient="green"] .overlay,
body[data-gradient="pink"]  .overlay,
body[data-gradient="white"] [class*="modal-overlay"],
body[data-gradient="gold"]  [class*="modal-overlay"],
body[data-gradient="green"] [class*="modal-overlay"],
body[data-gradient="pink"]  [class*="modal-overlay"] {
    background: rgba(38, 38, 56, 0.34) !important;
    backdrop-filter: blur(14px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

body[data-gradient="white"] .modal-content,
body[data-gradient="gold"]  .modal-content,
body[data-gradient="green"] .modal-content,
body[data-gradient="pink"]  .modal-content,
body[data-gradient="white"] .modal-box,
body[data-gradient="gold"]  .modal-box,
body[data-gradient="green"] .modal-box,
body[data-gradient="pink"]  .modal-box {
    background: var(--lux-bg-2) !important;
    border: 1px solid var(--lux-line) !important;
    box-shadow: var(--lux-shadow-lg) !important;
}
body[data-gradient="white"] .modal-header,
body[data-gradient="gold"]  .modal-header,
body[data-gradient="green"] .modal-header,
body[data-gradient="pink"]  .modal-header { border-color: var(--lux-line) !important; }
body[data-gradient="white"] .modal-close:hover,
body[data-gradient="gold"]  .modal-close:hover,
body[data-gradient="green"] .modal-close:hover,
body[data-gradient="pink"]  .modal-close:hover { background: var(--lux-accent-wash) !important; }

/* ----------------------------------------------------------------------------
   11. SELECTION + SCROLLBARS
---------------------------------------------------------------------------- */
body[data-gradient="white"] ::selection,
body[data-gradient="gold"]  ::selection,
body[data-gradient="green"] ::selection,
body[data-gradient="pink"]  ::selection {
    background: var(--lux-accent);
    color: var(--lux-on-accent);
}

body[data-gradient="white"] ::-webkit-scrollbar-thumb,
body[data-gradient="gold"]  ::-webkit-scrollbar-thumb,
body[data-gradient="green"] ::-webkit-scrollbar-thumb,
body[data-gradient="pink"]  ::-webkit-scrollbar-thumb { background: rgba(22, 22, 33, 0.18) !important; }
body[data-gradient="white"] ::-webkit-scrollbar-thumb:hover,
body[data-gradient="gold"]  ::-webkit-scrollbar-thumb:hover,
body[data-gradient="green"] ::-webkit-scrollbar-thumb:hover,
body[data-gradient="pink"]  ::-webkit-scrollbar-thumb:hover { background: var(--lux-accent) !important; }

/* ----------------------------------------------------------------------------
   12. GENERIC PANELS / SURFACES that relied on white-on-dark overlays
---------------------------------------------------------------------------- */
body[data-gradient="white"] .admin-only-block,
body[data-gradient="gold"]  .admin-only-block,
body[data-gradient="green"] .admin-only-block,
body[data-gradient="pink"]  .admin-only-block {
    background: var(--lux-accent-wash) !important;
    border-color: var(--lux-accent-line) !important;
}

/* ----------------------------------------------------------------------------
   13. GRADIENT PICKER — new swatches + legibility on light swatches
---------------------------------------------------------------------------- */
.gradient-option[data-gradient="white"]::before {
    background: linear-gradient(135deg, #e9e7e1 0%, #ffffff 48%, #f3f0ea 100%);
}
.gradient-option[data-gradient="pink"]::before {
    background: linear-gradient(135deg, #a83e6c 0%, #e87aa6 48%, #ffd9e7 100%);
}
.gradient-option[data-gradient="gold"]::before {
    background: linear-gradient(135deg, #8a6a26 0%, #e3c476 48%, #fffaf0 100%);
}

/* dark, readable label for the near-white swatches */
.gradient-option[data-gradient="white"] .gradient-option-name,
.gradient-option[data-gradient="ice"] .gradient-option-name {
    color: #1b1b22;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

/* active ring that works on a light modal */
body[data-gradient="white"] .gradient-option.active,
body[data-gradient="gold"]  .gradient-option.active,
body[data-gradient="green"] .gradient-option.active,
body[data-gradient="pink"]  .gradient-option.active {
    border-color: var(--lux-accent) !important;
    box-shadow: 0 0 0 4px var(--lux-accent-wash), var(--lux-shadow) !important;
}

/* ----------------------------------------------------------------------------
   14. ADMIN / DASHBOARD — clearer visual hierarchy (CSS only, no DOM changes)
   Makes the control surfaces easier to scan: labelled groups, calmer spacing,
   and a distinct treatment for the admin nav block so it reads as "control".
---------------------------------------------------------------------------- */
body[data-gradient="white"] #admin-nav-section,
body[data-gradient="gold"]  #admin-nav-section,
body[data-gradient="green"] #admin-nav-section,
body[data-gradient="pink"]  #admin-nav-section {
    background: var(--lux-accent-wash) !important;
    border: 1px solid var(--lux-accent-line) !important;
    border-radius: 14px;
    margin: 10px 8px 4px !important;
    padding: 6px 8px 8px !important;
    position: relative;
}
body[data-gradient="white"] #admin-nav-section .nav-section-title,
body[data-gradient="gold"]  #admin-nav-section .nav-section-title,
body[data-gradient="green"] #admin-nav-section .nav-section-title,
body[data-gradient="pink"]  #admin-nav-section .nav-section-title {
    color: var(--lux-accent) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

/* section titles a touch more refined across the light family */
body[data-gradient="white"] .nav-section-title,
body[data-gradient="gold"]  .nav-section-title,
body[data-gradient="green"] .nav-section-title,
body[data-gradient="pink"]  .nav-section-title { letter-spacing: 0.1em; }

/* page title gets an elegant weight + tracking */
body[data-gradient="white"] .page-title,
body[data-gradient="gold"]  .page-title,
body[data-gradient="green"] .page-title,
body[data-gradient="pink"]  .page-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}