/* ============================================================
   Utility Engine — shared "sky" design system  (sky.css)
   ------------------------------------------------------------
   Ported from the launch-window seed. The palette follows the
   visitor's local hour (night / dawn / day / dusk) via
   [data-theme] and can be cycled with the sky button. Everything
   is token-driven, so each phase is just a token set. This file
   owns the ATMOSPHERE (tokens, the sky gradient, star/grid
   texture, twinkle, moon, shooting stars, the theme toggle and
   its sweep/toast). UI components live in components.css.

   Every utility-engine site ships this file at /_ue/sky.css.
   Per-site brand accent is injected via --brand on :root (see
   the inline <head> token block the scaffold emits); when set it
   overrides the per-phase --accent so the vertical keeps its hue.

   SCALES. Besides colour, :root carries the three scales every
   component is built from — type (--step-*), space (--space-*)
   and elevation (--shadow-1/2/3). Consume the tokens; do not
   reintroduce ad-hoc px/rem. The shadow ramp is composed once
   here from per-phase INPUTS (--shadow-rgb / --shadow-a*), which
   is deliberate: the ramp itself is only ever declared at :root
   (0,1,0) so a site stylesheet loaded later can still redefine
   --shadow-1/2/3 wholesale without fighting phase specificity.
   ============================================================ */

:root {
  /* ignition accent — reserved for urgency / primary CTAs in EVERY phase */
  --ignite: #ff6a2b;
  --ignite-bg: rgba(255, 106, 43, 0.16);

  /* status (dark-phase defaults; the day phase overrides for contrast) */
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.16);
  --warn: #fbbf24;    --warn-bg: rgba(251, 191, 36, 0.16);
  --danger: #f87171;  --danger-bg: rgba(248, 113, 113, 0.16);

  /* ---------- shape ---------- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --maxw: 760px;          /* per-site override: createSite({ maxWidth }) → inline on <html> */

  /* ---------- typefaces ----------
     Default is a zero-network system stack. createSite({ fonts }) emits a
     <style> block after this file that re-points these two tokens (and the
     matching <link>s), so a webfont is opt-in, never forced. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- fluid modular type scale ----------
     ~1.20 ratio at 360px viewport, ~1.25 at 1240px. --step-0 is body copy;
     everything above it is display/heading territory, below it is fine print.
     Use these instead of hand-picked rem values so hierarchy holds at every
     width and a headline can never be smaller than the ad label beside it. */
  --step--2: clamp(0.694rem, 0.677rem + 0.075vw, 0.75rem);
  --step--1: clamp(0.833rem, 0.807rem + 0.116vw, 0.92rem);
  --step-0:  clamp(1rem, 0.962rem + 0.170vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.144rem + 0.250vw, 1.386rem);
  --step-2:  clamp(1.44rem, 1.357rem + 0.369vw, 1.715rem);
  --step-3:  clamp(1.728rem, 1.605rem + 0.545vw, 2.134rem);
  --step-4:  clamp(2.074rem, 1.894rem + 0.798vw, 2.669rem);
  --step-5:  clamp(2.488rem, 2.229rem + 1.152vw, 3.347rem);

  /* ---------- 8pt spacing scale ---------- */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */

  /* ---------- elevation ramp ----------
     Inputs (--shadow-rgb / --shadow-a1..3) are re-declared per phase: a shadow
     that reads on #06050e is invisible, and one that reads on #eef4fb is soot. */
  --shadow-rgb: 0 0 0;
  --shadow-a1: 0.26; --shadow-a2: 0.34; --shadow-a3: 0.44;
  --shadow-1:
    0 1px 2px rgb(var(--shadow-rgb) / calc(var(--shadow-a1) * 0.55)),
    0 2px 6px -1px rgb(var(--shadow-rgb) / var(--shadow-a1));
  --shadow-2:
    0 3px 8px -2px rgb(var(--shadow-rgb) / calc(var(--shadow-a2) * 0.6)),
    0 14px 32px -8px rgb(var(--shadow-rgb) / var(--shadow-a2));
  --shadow-3:
    0 8px 18px -6px rgb(var(--shadow-rgb) / calc(var(--shadow-a3) * 0.55)),
    0 30px 64px -14px rgb(var(--shadow-rgb) / var(--shadow-a3));

  /* modal / overlay scrim (the day phase lightens it) */
  --scrim: rgba(4, 4, 14, 0.55);

  /* shared texture images, selected per phase via --tex */
  --stars:
    radial-gradient(1px 1px at 18px 32px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 64px 14px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 122px 48px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 174px 22px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 40px 88px, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 96px 104px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 150px 92px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.4px 1.4px at 190px 70px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 26px 150px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 80px 168px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 134px 150px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 186px 176px, rgba(255, 255, 255, 0.55), transparent);
  --grid:
    linear-gradient(rgba(20, 60, 120, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 60, 120, 0.05) 1px, transparent 1px);
  /* brighter, faintly-tinted stars for the twinkle layer (body::after) */
  --stars2:
    radial-gradient(1.5px 1.5px at 50px 60px, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1.6px 1.6px at 150px 30px, rgba(190, 210, 255, 0.9), transparent),
    radial-gradient(1.3px 1.3px at 100px 130px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 24px 118px, rgba(255, 235, 210, 0.85), transparent),
    radial-gradient(1.4px 1.4px at 210px 96px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 252px 170px, rgba(210, 225, 255, 0.85), transparent),
    radial-gradient(1.3px 1.3px at 70px 208px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 170px 198px, rgba(255, 245, 225, 0.85), transparent);
}

/* ---- DUSK (default / fallback) ---- */
:root, :root[data-theme="dusk"] {
  --bg: #0b0a1f;
  --panel: rgba(24, 18, 52, 0.55);
  --shadow-rgb: 0 0 0;
  --shadow-a1: 0.26; --shadow-a2: 0.34; --shadow-a3: 0.44;
  --panel-shadow: var(--shadow-2);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --text: #eef1f8; --muted: #aab0d6; --faint: #7b82a8;
  --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20);
  --accent: #7aa2ff; --accent-bg: rgba(122, 162, 255, 0.16);
  --sky:
    radial-gradient(900px 480px at 50% 122%, rgba(255, 122, 60, 0.10), transparent 62%),
    radial-gradient(1100px 720px at 50% -12%, #261658 0%, #160e38 42%, #0b0a1f 100%);
  --tex: var(--stars); --tex-opacity: 0.5; --tex-size: 220px 220px;
  --tex2-opacity: 0.7;
  --sweep-color: rgba(255, 122, 60, 0.5);
}

/* ---- NIGHT ---- */
:root[data-theme="night"] {
  --bg: #06050e;
  --panel: rgba(16, 16, 40, 0.55);
  --shadow-rgb: 0 0 0;
  --shadow-a1: 0.34; --shadow-a2: 0.46; --shadow-a3: 0.58;
  --panel-shadow: var(--shadow-2);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.075);
  --text: #eef1f8; --muted: #a6adcf; --faint: #737aa0;
  --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20);
  --accent: #8ab4ff; --accent-bg: rgba(138, 180, 255, 0.16);
  --sky:
    radial-gradient(800px 500px at 50% 120%, rgba(60, 80, 160, 0.12), transparent 60%),
    radial-gradient(1200px 820px at 50% -10%, #12122e 0%, #0a0a1c 45%, #06050e 100%);
  --tex: var(--stars); --tex-opacity: 0.85; --tex-size: 200px 200px;
  --tex2-opacity: 0.95;
  --sweep-color: rgba(138, 180, 255, 0.45);
}

/* ---- DAWN (rosier + lighter than dusk, sun about to crest) ---- */
:root[data-theme="dawn"] {
  --bg: #241641;
  --panel: rgba(52, 34, 78, 0.5);
  --shadow-rgb: 12 4 24;
  --shadow-a1: 0.24; --shadow-a2: 0.32; --shadow-a3: 0.42;
  --panel-shadow: var(--shadow-2);
  --surface: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.09);
  --text: #f6eef6; --muted: #d4bdd1; --faint: #ab90a8;
  --border: rgba(255, 255, 255, 0.13); --border-strong: rgba(255, 255, 255, 0.24);
  --accent: #c9b2ff; --accent-bg: rgba(201, 178, 255, 0.20);
  --sky:
    radial-gradient(1300px 760px at 50% 116%, rgba(255, 158, 110, 0.48), rgba(255, 120, 155, 0.24) 36%, rgba(150, 110, 195, 0.12) 60%, transparent 76%),
    radial-gradient(1100px 840px at 50% -8%, #412c63 0%, #30214f 46%, #241641 100%);
  --tex: var(--stars); --tex-opacity: 0.26; --tex-size: 220px 220px;
  --tex2-opacity: 0.42;
  --sweep-color: rgba(255, 150, 105, 0.55);
}

/* ---- DAY (Daylight) — the only LIGHT phase. Every token the components read
   is redeclared here, including the ones whose dark-phase defaults are unusable
   on white: --ignite (an orange that fails contrast under white button text),
   --on-accent, and the elevation inputs (pure black at 0.34 alpha is soot on a
   light surface — day uses a cool navy ink at a fraction of the opacity). ---- */
:root[data-theme="day"] {
  --bg: #eef4fb;
  --panel: #ffffff;
  --shadow-rgb: 22 44 84;
  --shadow-a1: 0.10; --shadow-a2: 0.13; --shadow-a3: 0.17;
  --panel-shadow: var(--shadow-2);
  --surface: #f1f6fc;
  --surface-2: #e6eef8;
  --text: #14233f; --muted: #51607d; --faint: #5e6680;
  --border: rgba(20, 40, 80, 0.12); --border-strong: rgba(20, 40, 80, 0.20);
  --accent: #0a6cff; --accent-bg: rgba(10, 108, 255, 0.10);
  --on-accent: #ffffff;
  --ignite: #d1410a; --ignite-bg: rgba(209, 65, 10, 0.10);
  --success: #0a8f53; --success-bg: rgba(10, 143, 83, 0.12);
  --warn: #b4770a;    --warn-bg: rgba(180, 119, 10, 0.12);
  --danger: #c0392b;  --danger-bg: rgba(192, 57, 43, 0.12);
  --sky: radial-gradient(1000px 560px at 50% -10%, #dcebfb 0%, #eaf2fb 45%, #f4f8fc 100%);
  --tex: var(--grid); --tex-opacity: 0.6; --tex-size: 38px 38px;
  --tex2-opacity: 0;
  --sweep-color: rgba(10, 108, 255, 0.32);
  --scrim: rgba(18, 30, 54, 0.42);
}

/* Per-site brand accent override: the scaffold sets --brand / --brand-bg on
   :root in the inline head block. When present it wins over the phase accent so
   each vertical keeps its own hue across all four skies. */
:root[style*="--brand"] { --accent: var(--brand, var(--accent)); --accent-bg: var(--brand-bg, var(--accent-bg)); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image: var(--sky);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  transition: background-color 0.7s ease, color 0.5s ease;
}

/* sky texture — stars at night/dawn/dusk, a precision grid by day */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--tex-opacity, 0.5);
  background-image: var(--tex);
  background-size: var(--tex-size, 220px 220px);
  transition: opacity 0.6s ease;
}

/* twinkle layer — brighter stars that gently pulse (dark phases only) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--stars2);
  background-size: 300px 300px;
  opacity: var(--tex2-opacity, 0);
  animation: twinkle 4.2s ease-in-out infinite;
  transition: opacity 0.6s ease;
}
@keyframes twinkle {
  0%, 100% { opacity: var(--tex2-opacity, 0); }
  50% { opacity: calc(var(--tex2-opacity, 0) * 0.35); }
}

/* occasional shooting stars + soft moon (dark phases only) */
.sky-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky-fx i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.55);
  opacity: 0;
}
.sky-fx i::after {
  content: "";
  position: absolute;
  top: 50%; left: 2px;
  width: 92px; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), transparent);
}
.sky-fx i:nth-child(1) { top: 8%;  left: 80%; animation: shoot 11s ease-in 4s infinite; }
.sky-fx i:nth-child(2) { top: 16%; left: 94%; animation: shoot 16s ease-in 10s infinite; }
@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-29deg); }
  2%   { opacity: 1; }
  10%  { opacity: 0; transform: translate(-340px, 190px) rotate(-29deg); }
  100% { opacity: 0; transform: translate(-340px, 190px) rotate(-29deg); }
}
[data-theme="day"] .sky-fx { display: none; }

/* moon — soft glowing disc behind the content (full at night, faint at dusk) */
.sky-fx .moon {
  position: absolute;
  top: 64px; right: 7%;
  width: 78px; height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 66% 70%, rgba(150, 160, 195, 0.38), transparent 22%),
    radial-gradient(circle at 40% 58%, rgba(150, 160, 195, 0.30), transparent 16%),
    radial-gradient(circle at 60% 34%, rgba(150, 160, 195, 0.24), transparent 13%),
    radial-gradient(circle at 36% 33%, #fefdf8, #e9ecf5 52%, #c4cad8 100%);
  box-shadow: 0 0 38px 8px rgba(214, 226, 255, 0.22), inset -7px -7px 16px rgba(85, 95, 130, 0.45);
  opacity: 0;
  transition: opacity 0.6s ease;
}
[data-theme="night"] .sky-fx .moon { opacity: 1; }
[data-theme="dusk"] .sky-fx .moon { opacity: 0.5; }
@media (max-width: 600px) {
  .sky-fx .moon { top: 86px; right: 6%; width: 64px; height: 64px; }
}

/* ---------- the sky toggle + its one-shot sweep + naming toast ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font-size: var(--step-0);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(0.92); }

/* one-shot color "ignition" sweep that blooms from the toggle on theme change */
.theme-sweep {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(circle at var(--ox, 50%) var(--oy, 8%), var(--sweep-color), transparent 55%);
  opacity: 0;
  will-change: opacity, transform;
  animation: theme-sweep 0.85s ease forwards;
}
@keyframes theme-sweep {
  0% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 0.95; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* transient label naming the new sky */
.theme-toast {
  position: fixed;
  left: 50%; bottom: var(--space-5);
  transform: translateX(-50%) translateY(8px);
  z-index: 10000;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--panel-shadow);
  opacity: 0;
  animation: theme-toast 1.8s ease forwards;
}
@keyframes theme-toast {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  12%, 70% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
