/* Napeeto — shared sky background + day/night design tokens.
 * sky.js adds html.sky-day or html.sky-night from Maldives (UTC+5) local time,
 * and injects the #sky element. Load this stylesheet FIRST on every page. */

:root {
  /* --- day palette (marketing family) --- */
  --ground: #eaf1fa;
  --surface: #fbf9f3;
  --sand: #ece5d4;
  --ink: #12302d;
  --ink-soft: #4a5e59;
  --ink-faint: #8593a6;
  --line: #d7ddcf;
  --line-soft: #e6ebdd;
  --lagoon: #0c7b84;
  --lagoon-deep: #0a5158;
  --shallow: #7cc6bf;
  --coral: #d8663f;
  --gold: #8cbebf;
  --slate: #344c4b;
  --on-sea: #f6fbf9;

  /* frosted panels */
  --glass: rgba(251, 249, 243, 0.7);
  --glass-solid: rgba(251, 249, 243, 0.86);
  --glass-2: rgba(255, 255, 255, 0.42);
  --glass-line: rgba(18, 48, 45, 0.1);
  --blur: saturate(1.4) blur(16px);
  --shadow: 0 22px 55px -26px rgba(10, 40, 70, 0.32);

  /* status */
  --ok-bg: #d7ebe6; --ok-ink: #1f6a63;
  --warn-bg: #f6e6c6; --warn-ink: #8a5a17;
  --info-bg: #dde6f2; --info-ink: #3f5a86;
  --mute-bg: #e6ebdd; --mute-ink: #5f6f68;
  --bad-bg: #f6dcd2; --bad-ink: #a5401f;
}

html.sky-night {
  --ground: #0b1330;
  --surface: #111a3a;
  --sand: #16204a;
  --ink: #eef3fb;
  --ink-soft: #b3c0da;
  --ink-faint: #7c8aab;
  --line: #2a3663;
  --line-soft: #202c54;
  --lagoon: #4bc0bd;
  --lagoon-deep: #74d6d3;
  --shallow: #3f7f95;
  --coral: #f0906e;
  --gold: #8cbebf;
  --slate: #9db8b7;
  --on-sea: #eef3fb;

  --glass: rgba(15, 24, 56, 0.6);
  --glass-solid: rgba(14, 22, 52, 0.86);
  --glass-2: rgba(20, 30, 66, 0.4);
  --glass-line: rgba(120, 140, 200, 0.16);
  --blur: saturate(1.1) blur(16px);
  --shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.6);

  --ok-bg: rgba(58, 150, 140, 0.2); --ok-ink: #86d8d1;
  --warn-bg: rgba(200, 150, 60, 0.2); --warn-ink: #e8c07d;
  --info-bg: rgba(110, 140, 220, 0.2); --info-ink: #adbdf0;
  --mute-bg: rgba(140, 160, 200, 0.14); --mute-ink: #aab6cf;
  --bad-bg: rgba(220, 110, 80, 0.22); --bad-ink: #f2a184;
}

html, body { min-height: 100%; }
body { background: transparent; }

/* the white wordmark: tint it lagoon by day, leave it white by night */
.topbar .home img, .bar .mark img, .toolbar > .mark img, .auth-pitch .mark img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(64%) saturate(520%) hue-rotate(140deg) brightness(92%);
}
html.sky-night .topbar .home img,
html.sky-night .bar .mark img,
html.sky-night .toolbar > .mark img,
html.sky-night .auth-pitch .mark img { filter: none; opacity: 0.95; }

/* ---------------- the sky ---------------- */
#sky {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #8fbfe8 0%, #b3d4f1 38%, #d9eafb 72%, #eef6fd 100%);
}
html.sky-night #sky {
  background: linear-gradient(180deg, #05081c 0%, #0a1130 42%, #141b3e 78%, #1d2449 100%);
}

/* soft daylight glow / sun haze */
#sky .sun {
  position: absolute; top: -22vh; left: 3vw; width: 62vw; height: 62vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 249, 228, 0.85) 0%, rgba(255, 245, 214, 0.4) 30%, transparent 60%);
}
html.sky-night #sky .sun { display: none; }

/* moon (night) — high and right, mostly tucked behind the top bar */
#sky .moon {
  position: absolute; top: 2vh; left: 70%; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fcfbf1 0%, #ece7cf 55%, #d6d1b6 100%);
  box-shadow: 0 0 55px 10px rgba(247, 244, 214, 0.2), inset -8px -8px 18px rgba(120, 116, 88, 0.28);
  display: none;
}
html.sky-night #sky .moon { display: block; }
@media (max-width: 700px) { #sky .moon { left: auto; right: 8vw; } }

/* clouds (day) */
#sky .cloud {
  position: absolute; height: 0; width: 0; filter: blur(1px);
}
#sky .cloud::before, #sky .cloud::after {
  content: ""; position: absolute; border-radius: 999px;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0.96), rgba(255,255,255,0.7) 55%, rgba(255,255,255,0) 78%);
}
#sky .cloud::before { width: 240px; height: 90px; left: -120px; top: -45px; }
#sky .cloud::after { width: 150px; height: 150px; left: -20px; top: -95px; }
html.sky-night #sky .cloud { opacity: 0.12; filter: blur(3px); }
#sky .cloud.a { top: 14vh; transform: scale(1); animation: drift 120s linear infinite; }
#sky .cloud.b { top: 30vh; transform: scale(0.62); animation: drift 168s linear infinite; animation-delay: -60s; }
#sky .cloud.c { top: 52vh; transform: scale(1.35); animation: drift 210s linear infinite; animation-delay: -140s; opacity: 0.85; }
#sky .cloud.d { top: 8vh; transform: scale(0.44); animation: drift 96s linear infinite; animation-delay: -30s; opacity: 0.9; }
#sky .cloud.e { top: 66vh; transform: scale(0.8); animation: drift 150s linear infinite; animation-delay: -100s; opacity: 0.7; }

@keyframes drift {
  from { margin-left: -30vw; }
  to { margin-left: 130vw; }
}

/* stars (night) — two twinkling layers, box-shadow field set by sky.js */
#sky .stars, #sky .stars2 {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%;
  background: transparent; display: none;
}
html.sky-night #sky .stars { display: block; animation: twinkle 5.5s ease-in-out infinite; }
html.sky-night #sky .stars2 { display: block; animation: twinkle 8s ease-in-out infinite 1.5s; }
@keyframes twinkle { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #sky .cloud, #sky .stars, #sky .stars2 { animation: none !important; }
}