/* css/theme-ruby-core.css */
/* MYTHOLOGICAL HIGH-TECH PALETTE: Marble, Gold, Ruby Core */

:root {
  /* ===== MARBLE FOUNDATION ===== */
  --color-bg: #0a0a0c;
  --color-bg-alt: #1a1a1d;
  --color-surface: #151518;
  
  /* Marble text colors */
  --color-text: #f5f3ee;
  --color-text-muted: rgba(245, 243, 238, 0.72);
  --color-heading: #f5f3ee;
  
  /* ===== GOLD METALLICS ===== */
  --color-gold: #d4af37;
  --color-gold-bright: #FFD700;
  --color-gold-dark: #b8941f;
  --color-gold-dim: rgba(212, 175, 55, 0.4);
  
  /* ===== RUBY CORE (replaces copper) ===== */
  /* Deep ruby, intense but not tomato / orange / pink */
  --color-crimson: #a1123a;
  --color-crimson-bright: #e23b5d;
  --color-crimson-dark: #5a0b25;
  --color-crimson-dim: rgba(160, 19, 63, 0.5);
  
  /* ===== ACCENT MAPPINGS ===== */
  --color-accent: var(--color-gold);
  --color-accent-strong: var(--color-gold-bright);
  --color-accent-soft-strong: var(--color-gold-dim);
  
  --color-nav: var(--color-text);
  
  /* ===== GLOW EFFECTS ===== */
  --glow-gold: 0 0 18px rgba(212, 175, 55, 0.8);
  --glow-gold-intense: 0 0 28px rgba(255, 215, 0, 0.9), 0 0 42px rgba(212, 175, 55, 0.6);

  /* Ruby glows: jewel-like, slightly violet-leaning, non-pink/non-orange */
  --glow-crimson: 0 0 20px rgba(160, 19, 63, 0.85);
  --glow-crimson-intense: 
    0 0 32px rgba(226, 59, 93, 1),
    0 0 48px rgba(160, 19, 63, 0.7);

  --glow-accent-soft: var(--glow-gold);
  
  /* ===== SHADOWS & DEPTH ===== */
  --shadow-carved: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  --shadow-embossed: 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-deep: 0 8px 24px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.8);
  
  /* ===== BORDERS ===== */
  --border-gold: 2px solid var(--color-gold-dark);
  --border-gold-bright: 2px solid var(--color-gold);
  --border-crimson: 2px solid var(--color-crimson);
  --border-subtle: 1px solid rgba(212, 175, 55, 0.25);
  
  /* ===== MARBLE TEXTURE ===== */
  --marble-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ===== GLASS CONTAINERS WITH MARBLE DEPTH ===== */
.glass-container {
  background: 
    linear-gradient(135deg, rgba(245, 243, 238, 0.02) 0%, transparent 50%),
    linear-gradient(225deg, rgba(26, 26, 29, 0.95) 0%, rgba(21, 21, 24, 0.98) 100%),
    var(--marble-noise);
  border: 2px solid rgba(212, 175, 55, 0.3);
  box-shadow: var(--shadow-carved), var(--shadow-deep);
}

.glass-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, 
    var(--color-gold-dim) 0%, 
    transparent 30%, 
    transparent 70%, 
    var(--color-gold-dim) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  pointer-events: none;
}

/* ============================================
   NOX MUSIC PAGE – RUBY CORE OVERRIDES
   (override hard-coded copper in JS/inline)
   ============================================ */

/* 1) Active album card: border + glow
   We detect the active card by its inline transform: scale(1.05) */
#nox-music-root .c-item[style*="scale(1.05)"] img {
  border-color: var(--color-crimson) !important;
  box-shadow:
    0 0 32px rgba(160, 19, 63, 1),
    0 0 48px rgba(160, 19, 63, 0.7),
    inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* 2) Play button: use ruby instead of copper */
#nox-music-root #play-btn {
  background-color: var(--color-crimson) !important;
}

/* 3) Track title hover: ruby bright instead of #e8886b */
#nox-music-root #tracklist .t-row:hover .t-title {
  color: var(--color-crimson-bright) !important;
}

/* 4) Waveform “active” bars
   JS marks active bars with background:#c66b4d in the style attribute.
   We remap that to ruby, keeping the progress effect. */
#nox-music-root .wf-bar[style*="#c66b4d"] {
  background-color: var(--color-crimson) !important;
}