/* ==========================================================================
   u.cash - Theme System
   Dark mode is default. Smooth transitions between themes.
   ========================================================================== */

/* ---- Color Scheme Declaration ---- */

:root {
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

/* ---- Theme Transition ---- */
/* Applied to key elements for smooth theme switching */

html {
  transition: background-color 0.3s var(--ease-default);
}

body,
.site-header,
.site-footer,
.navbar,
.card,
.card-glass,
.card-solid,
.card-bordered,
.nav-panel,
.hero,
.section,
input,
textarea,
select,
button,
.btn {
  transition:
    background-color 0.3s var(--ease-default),
    color 0.3s var(--ease-default),
    border-color 0.3s var(--ease-default),
    box-shadow 0.3s var(--ease-default);
}

/* ---- Theme Toggle Button ---- */

.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition-base);
}

.theme-toggle:hover {
  background: var(--color-glass-bg-hover);
  border-color: var(--color-glass-border-hover);
  transform: scale(1.05);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-gold-primary);
  outline-offset: 2px;
}

/* Sun icon (shown in dark mode) */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  transition: opacity 0.3s var(--ease-default),
              transform 0.3s var(--ease-default);
}

/* Dark mode: show sun, hide moon */
.theme-toggle .icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.theme-toggle .icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
}

/* Light mode: show moon, hide sun */
[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
}

[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* Icon SVG fills */
.theme-toggle svg {
  fill: var(--color-gold-primary);
}

/* ---- Theme-Specific Overrides ---- */

/* Dark mode enhancements */
:root .glass-inset {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .glass-inset {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Theme overlay for hero sections */
.theme-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-base);
}

:root .theme-overlay {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(204, 153, 51, 0.06) 0%,
    transparent 60%
  );
}

[data-theme="light"] .theme-overlay {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(153, 114, 38, 0.04) 0%,
    transparent 60%
  );
}