/* ============================================================================
   ASTRAL SPECTRUM — Design System
   A Living Celestial Observatory · Digital Jyotisha
   ----------------------------------------------------------------------------
   Observatory (dark) is the default theme. Tokens below are the single source
   of truth referenced across CelestialDome / PanchangHUD / TransitTheater.
   ========================================================================== */

:root {
  /* ---- Celestial backgrounds (Imperial Twilight) ---- */
  --void:            #0D0618;
  --void-2:          #150D28;
  --night-indigo-1:  #150D28;
  --night-indigo-2:  #1E1438;
  --nebula-violet:   #251A42;
  --nebula-blue:     #1E1438;

  /* ---- Sacred data colors ---- */
  --gold:            #D4A843;   /* antique gold — primary accent */
  --gold-dim:        #8a7233;
  --gold-bright:     #F0C84A;
  --gold-soft:       #F3D78C;
  --crimson:         #A61E4D;   /* primary CTA / connective */
  --crimson-br:      #D94A3D;
  --silver:          #B8A898;   /* Tithi / lunar / time markers */
  --silver-dim:      #5d6068;
  --m-green:         #5FB88A;   /* Shubh · Amrit · Labh */
  --m-red:           #D94A3D;   /* Rahu Kalam · Yamaganda · Gulika */
  --m-amber:         #D4A843;   /* Char · neutral */
  --retro-purple:    #9C67E5;   /* Vakri */
  --combust-orange:  #D94A3D;   /* within 8° of Sun */

  /* ---- Rashi chromatics (faint tints on the ecliptic) ---- */
  --r-mesha:      #C0392B;
  --r-vrishabha:  #5FB88A;
  --r-mithuna:    #D4B106;
  --r-karka:      #D9DCE1;
  --r-simha:      #E08A2E;
  --r-kanya:      #8A6D3B;
  --r-tula:       #D98BA6;
  --r-vrishchika: #7B1E2B;
  --r-dhanu:      #7E5AA8;
  --r-makara:     #565a63;
  --r-kumbha:     #2E6FB0;
  --r-meena:      #2E8B7F;

  /* ---- Graha identity (navagraha) ---- */
  --g-surya:   #F0C84A;
  --g-chandra: #E0DFEF;
  --g-mangala: #E5614A;
  --g-budha:   #6FCF7A;
  --g-guru:    #F0A23E;
  --g-shukra:  #E899B5;
  --g-shani:   #7E8E9A;
  --g-rahu:    #9C67E5;
  --g-ketu:    #9B7A6E;

  /* ---- Text ---- */
  --ink:         #F0E6D3;
  --ink-soft:    rgba(236, 231, 218, 0.66);
  --ink-faint:   rgba(236, 231, 218, 0.40);

  /* ---- Typography ---- */
  --font-sacred: "Cormorant Garamond", Georgia, serif;
  --font-data:   "Inter", system-ui, sans-serif;
  --font-ephem:  "Space Mono", "JetBrains Mono", monospace;
  --font-dev:    "Noto Sans Devanagari", var(--font-sacred);

  /* ---- Type scale ---- */
  --t-hero:   clamp(2.4rem, 4vw, 3.6rem);
  --t-title:  clamp(1.5rem, 2.4vw, 2.1rem);
  --t-lg:     1.25rem;
  --t-md:     1rem;
  --t-sm:     0.8125rem;
  --t-xs:     0.6875rem;
  --t-micro:  0.5625rem;

  /* ---- Spacing (4px base grid) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* ---- Radii (sharp = authority, ≤8px) ---- */
  --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 8px;

  /* ---- Glassmorphism ---- */
  --glass-fill:   rgba(21, 13, 40, 0.55);
  --glass-fill-2: rgba(30, 20, 56, 0.7);
  --glass-blur:   blur(18px) saturate(120%);
  --glass-border: rgba(212, 168, 67, 0.22);
  --glass-glow:   0 1px 0 rgba(255,255,255,0.04) inset,
                  0 18px 48px -24px rgba(0,0,0,0.9);

  /* ---- Animation tokens ---- */
  --ease-celestial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-orbit:     cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:   180ms;
  --dur-med:    420ms;
  --dur-slow:   900ms;
  --dur-cosmic: 2400ms;
}

/* ---- Daylight (toggle) theme override ---- */
:root[data-sky="day"] {
  --void:   #e9e3d4;
  --void-2: #d8e3ee;
  --night-indigo-1: #cdd9e6;
  --night-indigo-2: #e7ecf2;
  --nebula-violet: #d9d2e6;
  --nebula-blue: #cfe0f0;
  --ink:      #211d12;
  --ink-soft: rgba(33, 29, 18, 0.7);
  --ink-faint:rgba(33, 29, 18, 0.45);
  --gold:     #9a7a1f;
  --silver:   #6b6f78;
  --glass-fill:   rgba(255, 252, 244, 0.55);
  --glass-fill-2: rgba(255, 252, 244, 0.72);
  --glass-border: rgba(154, 122, 31, 0.28);
}

/* ============================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-data);
  color: var(--ink);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

.observatory {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  isolation: isolate;
}

/* Dynamic sky backdrop — shifts with simulated time of day */
.sky-backdrop {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, var(--nebula-violet) 0%, transparent 55%),
    radial-gradient(120% 80% at 80% 100%, var(--nebula-blue) 0%, transparent 50%),
    linear-gradient(180deg, var(--night-indigo-1) 0%, var(--void) 70%, var(--void-2) 100%);
  transition: background var(--dur-cosmic) var(--ease-celestial);
}
.sky-backdrop::after {  /* faint vignette to focus the dome */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 46%, transparent 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* ============================================================================
   GLASS UTILITY
   ========================================================================== */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-glow);
}
.glass-strong { background: var(--glass-fill-2); }

.eyebrow {
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.dev { font-family: var(--font-dev); }
.ephem { font-family: var(--font-ephem); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sacred { font-family: var(--font-sacred); }
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================================
   KEYFRAMES — pulse · glow · orbit · ripple · fade · slide · drift
   ========================================================================== */
@keyframes corona-spin { to { transform: rotate(360deg); } }
@keyframes soft-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes mars-throb {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px var(--g-mangala)); }
  50%      { transform: scale(1.18); filter: drop-shadow(0 0 9px var(--g-mangala)); }
}
@keyframes mercury-jitter {
  0%,100%{transform:translate(0,0)} 25%{transform:translate(0.6px,-0.5px)}
  50%{transform:translate(-0.5px,0.4px)} 75%{transform:translate(0.4px,0.5px)}
}
@keyframes halo-breathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.12); }
}
@keyframes transit-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { opacity: 0.12; }
  100% { transform: scale(2.8); opacity: 0; }
}
@keyframes ripple-out {
  0%   { transform: scale(0.2); opacity: 0.85; }
  100% { transform: scale(3.4); opacity: 0; }
}
@keyframes twinkle {
  0%, 100% { opacity: var(--tw-min, 0.15); }
  50%      { opacity: var(--tw-max, 0.9); }
}
@keyframes drift-particle {
  to { offset-distance: 100%; opacity: 0; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bindu-morph {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(180deg) scale(1.06); }
}
@keyframes gold-wash {
  0%   { opacity: 0; }
  30%  { opacity: 0.5; }
  100% { opacity: 0; }
}
@keyframes count-flash {
  0%, 100% { color: var(--gold); }
  50%      { color: var(--gold-bright); }
}

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

/* ============================================================================
   PRINT / PDF — clean report of the current Kundali / Panchang view
   ========================================================================== */
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { height: auto; overflow: visible; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nav-rail, .oracle-orb, .oracle-panel, .crossing-flash, .dome-hint, .ds-head-tithi,
  .ctrlbar, .kn-edit, .tweaks-host, [data-tweaks-root], .sky-backdrop, .starfield { display: none !important; }
  .observatory { height: auto !important; overflow: visible !important; }
  .detail-surface { position: static !important; left: 0 !important; right: 0 !important; padding: 0 !important; height: auto !important; }
  .ds-scroll { overflow: visible !important; height: auto !important; padding: 0 !important; }
  .ku-ws { grid-template-columns: 1fr !important; }
  .ku-sidenav { position: static !important; }
  .ku-subnav { display: none !important; }
  .ds-section, .kchart-box, .ku-nativity, .yoga-card, .dosha-card, .sb-card, .fest-card { break-inside: avoid; }
}