/* Celestia Mini App — design tokens (Cosmic Glassmorphism)
   Variables are defined on :root, body, and [data-theme] so they're reachable
   regardless of which element carries the theme attribute. */

:root,
body[data-theme='cosmic'],
[data-theme='cosmic'] {
  /* base */
  --bg-void:        #0b0b1f;
  --bg-deep:        #1a0d3a;
  --bg-shallow:     #2a1659;
  --bg-aurora-a:    #4b2d8c;
  --bg-aurora-b:    #1d4a7a;

  /* glass surfaces */
  --surface-1:      rgba(255,255,255,0.04);
  --surface-2:      rgba(255,255,255,0.07);
  --surface-3:      rgba(255,255,255,0.10);
  --surface-border: rgba(255,255,255,0.10);
  --surface-glow:   rgba(186,150,255,0.18);

  /* content */
  --text-strong:    #F5F2FF;
  --text-default:   #D8D2EE;
  --text-muted:     #9C92BD;
  --text-faint:     #6E6588;

  /* accents */
  --accent-spec-a:  #FFD27A;
  --accent-spec-b:  #FF8E5E;
  --accent-violet:  #B69AFF;
  --accent-teal:    #7FE5D1;
  --accent-rose:    #FF9EC1;
  --accent-saffron: #FFB061;

  --signal-success: #7FE5D1;
  --signal-warning: #FFC066;
  --signal-error:   #FF6F8E;

  --sign-fire:   #FF8B7A;
  --sign-earth:  #C7B86E;
  --sign-air:    #9FCFFF;
  --sign-water:  #82A8FF;

  --cta-bg: linear-gradient(135deg, var(--accent-spec-a) 0%, var(--accent-spec-b) 100%);
  --cta-text: #1A0D2E;

  --shadow-card:  0 12px 40px rgba(0,0,0,0.42);
  --shadow-modal: 0 30px 80px rgba(0,0,0,0.6);
  --glow-violet:  0 0 36px rgba(182,154,255,0.28);
  --glow-spec:    0 0 28px rgba(255,210,122,0.36);

  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Global resets inside the prototype */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #050510;
  color: var(--text-strong);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }
input, textarea { font-family: inherit; color: inherit; }

/* utility — reusable glass card */
.glass {
  background: var(--surface-2);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--surface-border);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    var(--shadow-card);
}

.glass-soft {
  background: var(--surface-1);
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* spec gradient stroke utility */
.spec-stroke {
  position: relative;
  isolation: isolate;
}
.spec-stroke::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: var(--cta-bg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Scrollbars — hide */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; }

/* Animations */
@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100px); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 0.85; }
}
@keyframes shoot {
  0% { transform: translate3d(0,0,0) rotate(var(--ang, -25deg)); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate3d(var(--dx,420px), var(--dy,260px), 0) rotate(var(--ang, -25deg)); opacity: 0; }
}
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sheetSlideIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes sheetSlideOut {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}
@keyframes backdropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes backdropFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes popupScaleIn {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes popupScaleOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.96) translateY(4px); }
}
@keyframes ctaPulse {
  0%, 100% {
    box-shadow:
      0 12px 30px rgba(255,142,94,0.30),
      0 0 0 0   rgba(255,210,122,0.6);
  }
  50% {
    box-shadow:
      0 12px 30px rgba(255,142,94,0.30),
      0 0 0 16px rgba(255,210,122,0);
  }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.fade-in { animation: fadeUp 320ms cubic-bezier(0.25, 1, 0.5, 1) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}