/* Solar Glass sky — shared phase tokens + celestial layer for all portal
   pages. Load AFTER the page's inline <style> so these override page-local
   day defaults. Pairs with solar-sky.js, which stamps html[data-phase] and
   html[data-weather]. This file is the single source of truth for palettes;
   page styles should reference the tokens, never phase colors directly. */
:root {
  --ink: #2b2318; --dim: #8a7a63; --accent: #b3611f; --live: #3f7d4e;
  --glass-line: rgba(120, 95, 60, .18);
  --glass-bg: rgba(255, 252, 245, .55);
  --field-bg: rgba(255, 253, 248, .8);
  --field-bg-soft: rgba(255, 253, 248, .6);
  --sky: linear-gradient(180deg, #f9f2e4 0%, #f4e7cf 45%, #eddcbc 100%);
  --sun-rgb: 233, 180, 90;
  --dune-rgb: "150,108,58";
  --grain-rgbs: "186,142,84|166,124,70|205,164,104|146,106,58";
  --star-rgb: "220,230,255";
  --star-a: 0;
  --cloud-rgb: 165, 150, 125;
  --rain-rgb: 120, 110, 95;
  --snow-rgb: 170, 160, 145;
  --card-shadow: 0 12px 28px rgba(140, 100, 45, .15);
}
html[data-phase="dawn"] {
  --ink: #2e2531; --dim: #8d7c88; --accent: #c25c41;
  --glass-line: rgba(150, 110, 120, .18); --glass-bg: rgba(253, 249, 247, .55);
  --field-bg: rgba(253, 250, 248, .8); --field-bg-soft: rgba(253, 250, 248, .6);
  --sky: linear-gradient(180deg, #ded8ec 0%, #f0dcd2 45%, #f2e2c4 100%);
  --sun-rgb: 240, 152, 112;
  --dune-rgb: "143,98,94";
  --grain-rgbs: "172,124,110|150,104,96|196,150,128|128,88,84";
  --cloud-rgb: 155, 135, 150;
  --rain-rgb: 135, 115, 125;
  --snow-rgb: 175, 160, 175;
  --card-shadow: 0 12px 28px rgba(130, 90, 90, .15);
}
html[data-phase="dusk"] {
  --ink: #372220; --dim: #97705f; --accent: #c34e1f;
  --glass-line: rgba(150, 90, 60, .2); --glass-bg: rgba(255, 246, 235, .5);
  --field-bg: rgba(255, 248, 240, .75); --field-bg-soft: rgba(255, 248, 240, .55);
  --sky: linear-gradient(180deg, #cfb0cd 0%, #eec19b 55%, #e89f66 100%);
  --sun-rgb: 232, 120, 52;
  --dune-rgb: "133,77,54";
  --grain-rgbs: "190,120,70|160,95,60|210,140,85|130,75,50";
  --cloud-rgb: 125, 95, 105;
  --rain-rgb: 125, 90, 82;
  --snow-rgb: 245, 240, 235;
  --card-shadow: 0 14px 30px rgba(120, 60, 30, .18);
}
html[data-phase="night"] {
  --ink: #e7eaf3; --dim: #9aa3bd; --accent: #dca55e; --live: #82c495;
  --glass-line: rgba(180, 195, 235, .14); --glass-bg: rgba(17, 23, 40, .55);
  --field-bg: rgba(13, 18, 32, .7); --field-bg-soft: rgba(13, 18, 32, .5);
  --sky: linear-gradient(180deg, #0f1424 0%, #171e34 55%, #232c49 100%);
  --sun-rgb: 200, 215, 255;
  --dune-rgb: "138,158,205";
  --grain-rgbs: "150,168,210|120,138,180|180,195,230|100,118,160";
  --star-a: 1;
  --cloud-rgb: 52, 62, 90;
  --rain-rgb: 150, 170, 215;
  --snow-rgb: 225, 235, 255;
  --card-shadow: 0 14px 32px rgba(0, 0, 0, .45);
}
body {
  color: var(--ink);
  background: var(--sky);
  transition: color .8s ease;
}
.glass {
  background: var(--glass-bg);
  transition: background .8s ease, border-color .8s ease;
}
.sun {
  position: fixed; left: var(--celest-x, 88%); top: var(--celest-y, 10%);
  right: auto; z-index: -2;
  width: 300px; height: 300px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--sun-rgb), .45) 0%, rgba(var(--sun-rgb), .1) 45%, transparent 70%);
  transition: left 2.5s linear, top 2.5s linear, opacity 2.5s ease;
}
html[data-phase="dawn"] .sun, html[data-phase="dusk"] .sun { width: 360px; height: 360px; }
html[data-phase="night"] .sun { display: none; }
.moon {
  position: fixed; left: var(--celest-x, 80%); top: var(--celest-y, 14%); z-index: -2;
  width: 92px; height: 92px; transform: translate(-50%, -50%);
  display: none; filter: drop-shadow(0 0 30px rgba(190, 205, 250, .45));
  transition: left 2.5s linear, top 2.5s linear, opacity 2.5s ease;
}
html[data-phase="night"] .moon { display: block; }
.clouds {
  position: fixed; inset: -22% -12%; z-index: -2; pointer-events: none;
  opacity: 0; transition: opacity 2.5s ease; filter: blur(30px);
  background:
    radial-gradient(42% 30% at 22% 24%, rgba(var(--cloud-rgb), .55), transparent 70%),
    radial-gradient(50% 34% at 68% 12%, rgba(var(--cloud-rgb), .45), transparent 70%),
    radial-gradient(38% 26% at 45% 40%, rgba(var(--cloud-rgb), .4), transparent 70%),
    radial-gradient(46% 30% at 88% 32%, rgba(var(--cloud-rgb), .35), transparent 70%);
  animation: clouds-drift 90s ease-in-out infinite alternate;
}
@keyframes clouds-drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
@media (prefers-reduced-motion: reduce) { .clouds { animation: none; } }
html[data-weather="cloud-light"] .clouds { opacity: .45; }
html[data-weather="cloud"] .clouds, html[data-weather="rain"] .clouds, html[data-weather="snow"] .clouds { opacity: .75; }
html[data-weather="pour"] .clouds { opacity: .92; }
html[data-weather="fog"] .clouds { opacity: 1; }
html[data-weather="cloud-light"] .sun, html[data-weather="cloud-light"] .moon { opacity: .7; }
html[data-weather="cloud"] .sun, html[data-weather="rain"] .sun, html[data-weather="snow"] .sun,
html[data-weather="cloud"] .moon, html[data-weather="rain"] .moon, html[data-weather="snow"] .moon { opacity: .45; }
html[data-weather="pour"] .sun, html[data-weather="fog"] .sun,
html[data-weather="pour"] .moon, html[data-weather="fog"] .moon { opacity: .2; }
#skyfield { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
@media (max-width: 720px) {
  .sun { width: 220px; height: 220px; }
  .moon { width: 72px; height: 72px; }
}