/* NeoHelio — Brand tokens & base styles
   Observatory aesthetic: deep space slate, amber solar warmth, aurora violet.
   Used across all artboards on the design canvas.

   Theming: light variants override these vars via [data-theme="..."] blocks
   below. The "default" (no data-theme) is the original Dark Observatory.   */

:root {
  /* Core palette */
  --nh-bg: #0a0e1a;             /* deep space slate */
  --nh-bg-2: #0d1220;           /* slightly raised */
  --nh-bg-3: #131a2c;           /* card surface */
  --nh-bg-4: #1a2237;           /* elevated */
  --nh-amber: #f59e0b;          /* solar amber */
  --nh-amber-soft: #fbbf24;
  --nh-amber-dim: #b8770a;
  --nh-violet: #7c5cff;         /* aurora violet */
  --nh-violet-soft: #a48cff;
  --nh-coral: #ff7a59;          /* alert / energy */
  --nh-coral-soft: #ff9a82;
  --nh-mint: #5ce1c0;           /* nominal / OK readout */

  /* Mono surface ink */
  --nh-ink: #f4f6fb;
  --nh-ink-2: rgba(244, 246, 251, 0.72);
  --nh-ink-3: rgba(244, 246, 251, 0.48);
  --nh-ink-4: rgba(244, 246, 251, 0.30);
  --nh-ink-5: rgba(244, 246, 251, 0.16);

  /* Hairlines */
  --nh-line: rgba(255, 255, 255, 0.06);
  --nh-line-2: rgba(255, 255, 255, 0.10);
  --nh-line-amber: rgba(245, 158, 11, 0.22);

  /* Semantic surface tints — referenced by .nh-card, .nh-grid-bg, .nh-btn.
     Themable: light variants flip these to dark-on-light. */
  --nh-grid-line: rgba(255, 255, 255, 0.025);
  --nh-card-tint-top: rgba(255, 255, 255, 0.025);
  --nh-card-tint-bot: rgba(255, 255, 255, 0.005);
  --nh-btn-bg: rgba(255, 255, 255, 0.02);

  /* The "accent" — swappable via Tweaks */
  --nh-accent: var(--nh-amber);
  --nh-accent-soft: var(--nh-amber-soft);
  --nh-accent-rgb: 245, 158, 11;

  /* Fonts */
  --nh-display: "Epilogue", "Times New Roman", serif;
  --nh-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --nh-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ───────────────────────────────────────────────────────────
   LIGHT THEMES
   Three tinted-paper variants. None use pure white — the brief
   explicitly forbids bright-white backgrounds, so each is a
   muted, tinted page tone.

   Each selector matches both :root[data-theme="..."] (whole-page
   theme) AND [data-theme="..."] on any descendant — that lets us
   scope a theme to a single artboard for side-by-side comparison.
   ─────────────────────────────────────────────────────────── */

/* 1 · Heliograph — sepia tan, vintage photographic process. Warm earth
   tones, the look of a sun-drawn print from 1839. */
:root[data-theme="heliograph"],
[data-theme="heliograph"] {
  --nh-bg: #d6c3a0;
  --nh-bg-2: #c9b68f;
  --nh-bg-3: #b9a47b;
  --nh-bg-4: #a08967;

  --nh-amber: #8a4a08;
  --nh-amber-soft: #a55c12;
  --nh-amber-dim: #5e3204;
  --nh-violet: #4a2da8;
  --nh-violet-soft: #6a4ec0;
  --nh-coral: #b8351a;
  --nh-coral-soft: #cc5036;
  --nh-mint: #0a6248;

  --nh-ink: #1c1408;
  --nh-ink-2: rgba(28, 20, 8, 0.78);
  --nh-ink-3: rgba(28, 20, 8, 0.56);
  --nh-ink-4: rgba(28, 20, 8, 0.38);
  --nh-ink-5: rgba(28, 20, 8, 0.20);

  --nh-line: rgba(28, 20, 8, 0.12);
  --nh-line-2: rgba(28, 20, 8, 0.18);
  --nh-line-amber: rgba(138, 74, 8, 0.34);

  --nh-grid-line: rgba(28, 20, 8, 0.06);
  --nh-card-tint-top: rgba(28, 20, 8, 0.025);
  --nh-card-tint-bot: rgba(28, 20, 8, 0.005);
  --nh-btn-bg: rgba(28, 20, 8, 0.025);

  --nh-accent: var(--nh-amber);
  --nh-accent-soft: var(--nh-amber-soft);
  --nh-accent-rgb: 138, 74, 8;
}

/* 2 · Mars — terracotta rust, oxide-red. Planetary geology, desert
   observatory, dust on the lens. */
:root[data-theme="mars"],
[data-theme="mars"] {
  --nh-bg: #d8a589;
  --nh-bg-2: #c89578;
  --nh-bg-3: #b78368;
  --nh-bg-4: #9c6d56;

  --nh-amber: #6a2d08;
  --nh-amber-soft: #8a3e12;
  --nh-amber-dim: #4a1c02;
  --nh-violet: #3d1ea8;
  --nh-violet-soft: #5a3cc4;
  --nh-coral: #88220e;
  --nh-coral-soft: #a23a20;
  --nh-mint: #084030;

  --nh-ink: #2a0e08;
  --nh-ink-2: rgba(42, 14, 8, 0.80);
  --nh-ink-3: rgba(42, 14, 8, 0.58);
  --nh-ink-4: rgba(42, 14, 8, 0.40);
  --nh-ink-5: rgba(42, 14, 8, 0.20);

  --nh-line: rgba(42, 14, 8, 0.14);
  --nh-line-2: rgba(42, 14, 8, 0.20);
  --nh-line-amber: rgba(106, 45, 8, 0.40);

  --nh-grid-line: rgba(42, 14, 8, 0.07);
  --nh-card-tint-top: rgba(42, 14, 8, 0.03);
  --nh-card-tint-bot: rgba(42, 14, 8, 0.006);
  --nh-btn-bg: rgba(42, 14, 8, 0.03);

  --nh-accent: var(--nh-amber);
  --nh-accent-soft: var(--nh-amber-soft);
  --nh-accent-rgb: 106, 45, 8;
}

/* 3 · Vellum — pale ivory, translucent technical-drawing paper.
   The architect's roll. */
:root[data-theme="vellum"],
[data-theme="vellum"] {
  --nh-bg: #ede5d2;
  --nh-bg-2: #e0d7c0;
  --nh-bg-3: #d2c8aa;
  --nh-bg-4: #c0b58e;

  --nh-amber: #9c5a08;
  --nh-amber-soft: #b87012;
  --nh-amber-dim: #6c3c04;
  --nh-violet: #4a36b8;
  --nh-violet-soft: #6a54d4;
  --nh-coral: #c44022;
  --nh-coral-soft: #d95c3e;
  --nh-mint: #086a52;

  --nh-ink: #1c1810;
  --nh-ink-2: rgba(28, 24, 16, 0.76);
  --nh-ink-3: rgba(28, 24, 16, 0.54);
  --nh-ink-4: rgba(28, 24, 16, 0.36);
  --nh-ink-5: rgba(28, 24, 16, 0.18);

  --nh-line: rgba(28, 24, 16, 0.10);
  --nh-line-2: rgba(28, 24, 16, 0.16);
  --nh-line-amber: rgba(156, 90, 8, 0.32);

  --nh-grid-line: rgba(28, 24, 16, 0.05);
  --nh-card-tint-top: rgba(28, 24, 16, 0.02);
  --nh-card-tint-bot: rgba(28, 24, 16, 0.004);
  --nh-btn-bg: rgba(28, 24, 16, 0.02);

  --nh-accent: var(--nh-amber);
  --nh-accent-soft: var(--nh-amber-soft);
  --nh-accent-rgb: 156, 90, 8;
}

/* 4 · Glacier — pale icy blue, crystalline cold. Polar observatory,
   snow-bright noon. */
:root[data-theme="glacier"],
[data-theme="glacier"] {
  --nh-bg: #dde7ee;
  --nh-bg-2: #cfdbe5;
  --nh-bg-3: #bccada;
  --nh-bg-4: #9bafc4;

  --nh-amber: #b85a04;
  --nh-amber-soft: #d37010;
  --nh-amber-dim: #884008;
  --nh-violet: #2d1ea8;
  --nh-violet-soft: #4a36c8;
  --nh-coral: #c8351a;
  --nh-coral-soft: #de5638;
  --nh-mint: #056548;

  --nh-ink: #0a1622;
  --nh-ink-2: rgba(10, 22, 34, 0.78);
  --nh-ink-3: rgba(10, 22, 34, 0.56);
  --nh-ink-4: rgba(10, 22, 34, 0.38);
  --nh-ink-5: rgba(10, 22, 34, 0.20);

  --nh-line: rgba(10, 22, 34, 0.10);
  --nh-line-2: rgba(10, 22, 34, 0.16);
  --nh-line-amber: rgba(184, 90, 4, 0.34);

  --nh-grid-line: rgba(10, 22, 34, 0.05);
  --nh-card-tint-top: rgba(10, 22, 34, 0.02);
  --nh-card-tint-bot: rgba(10, 22, 34, 0.004);
  --nh-btn-bg: rgba(10, 22, 34, 0.02);

  --nh-accent: var(--nh-amber);
  --nh-accent-soft: var(--nh-amber-soft);
  --nh-accent-rgb: 184, 90, 4;
}

/* 5 · Pollen — saturated yellow-cream, warm and luminous. The colour
   of a high-output solar array at peak. */
:root[data-theme="pollen"],
[data-theme="pollen"] {
  --nh-bg: #ebe1b8;
  --nh-bg-2: #ddd29c;
  --nh-bg-3: #ccc080;
  --nh-bg-4: #b0a05c;

  --nh-amber: #846008;
  --nh-amber-soft: #a07410;
  --nh-amber-dim: #5a4204;
  --nh-violet: #4a2da8;
  --nh-violet-soft: #6c4ed4;
  --nh-coral: #aa3a14;
  --nh-coral-soft: #c45836;
  --nh-mint: #086248;

  --nh-ink: #1f1804;
  --nh-ink-2: rgba(31, 24, 4, 0.80);
  --nh-ink-3: rgba(31, 24, 4, 0.58);
  --nh-ink-4: rgba(31, 24, 4, 0.40);
  --nh-ink-5: rgba(31, 24, 4, 0.20);

  --nh-line: rgba(31, 24, 4, 0.13);
  --nh-line-2: rgba(31, 24, 4, 0.20);
  --nh-line-amber: rgba(132, 96, 8, 0.36);

  --nh-grid-line: rgba(31, 24, 4, 0.07);
  --nh-card-tint-top: rgba(31, 24, 4, 0.03);
  --nh-card-tint-bot: rgba(31, 24, 4, 0.006);
  --nh-btn-bg: rgba(31, 24, 4, 0.03);

  --nh-accent: var(--nh-amber);
  --nh-accent-soft: var(--nh-amber-soft);
  --nh-accent-rgb: 132, 96, 8;
}

/* 6 · Mineral — sage grey-green, oxidized copper. Weathered instrument
   housing, patina, museum cabinet. */
:root[data-theme="mineral"],
[data-theme="mineral"] {
  --nh-bg: #c5d0c5;
  --nh-bg-2: #b6c4b6;
  --nh-bg-3: #a3b5a4;
  --nh-bg-4: #87a087;

  --nh-amber: #985a08;
  --nh-amber-soft: #b46e12;
  --nh-amber-dim: #683e04;
  --nh-violet: #3a2da0;
  --nh-violet-soft: #5648c0;
  --nh-coral: #aa3a16;
  --nh-coral-soft: #c45638;
  --nh-mint: #04543e;

  --nh-ink: #0c1812;
  --nh-ink-2: rgba(12, 24, 18, 0.78);
  --nh-ink-3: rgba(12, 24, 18, 0.56);
  --nh-ink-4: rgba(12, 24, 18, 0.38);
  --nh-ink-5: rgba(12, 24, 18, 0.20);

  --nh-line: rgba(12, 24, 18, 0.12);
  --nh-line-2: rgba(12, 24, 18, 0.18);
  --nh-line-amber: rgba(152, 90, 8, 0.34);

  --nh-grid-line: rgba(12, 24, 18, 0.06);
  --nh-card-tint-top: rgba(12, 24, 18, 0.025);
  --nh-card-tint-bot: rgba(12, 24, 18, 0.005);
  --nh-btn-bg: rgba(12, 24, 18, 0.025);

  --nh-accent: var(--nh-amber);
  --nh-accent-soft: var(--nh-amber-soft);
  --nh-accent-rgb: 152, 90, 8;
}

/* Artboard root — every artboard wraps content in .nh-board */
.nh-board {
  background: var(--nh-bg);
  color: var(--nh-ink);
  font-family: var(--nh-sans);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* Ambient glow utility — soft radial behind hero content */
.nh-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.7;
}

/* Hairline grid backdrop — instrument paper feel */
.nh-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--nh-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nh-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  pointer-events: none;
}
.nh-grid-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, var(--nh-bg) 100%);
}

/* Cardstock */
.nh-card {
  background: linear-gradient(180deg, var(--nh-card-tint-top), var(--nh-card-tint-bot));
  border: 1px solid var(--nh-line);
  border-radius: 6px;
  position: relative;
}

.nh-card-amber {
  border-color: var(--nh-line-amber);
  box-shadow:
    inset 0 1px 0 rgba(245,158,11,0.08),
    0 0 0 1px rgba(245,158,11,0.04),
    0 12px 40px -16px rgba(245,158,11,0.25);
}

/* Mono technical readouts */
.nh-mono {
  font-family: var(--nh-mono);
  font-feature-settings: "zero", "ss01";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.nh-eyebrow {
  font-family: var(--nh-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nh-ink-3);
  font-weight: 500;
}

.nh-eyebrow-amber {
  font-family: var(--nh-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nh-accent);
  font-weight: 500;
}

/* Status dots */
.nh-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}
.nh-dot-amber { background: var(--nh-amber); box-shadow: 0 0 12px var(--nh-amber); }
.nh-dot-mint  { background: var(--nh-mint);  box-shadow: 0 0 12px var(--nh-mint);  }
.nh-dot-coral { background: var(--nh-coral); box-shadow: 0 0 10px var(--nh-coral); }
.nh-dot-violet{ background: var(--nh-violet);box-shadow: 0 0 10px var(--nh-violet);}
.nh-dot-dim   { background: var(--nh-ink-4); }

/* Subtle pulse used on live indicators */
@keyframes nh-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.18); }
}
.nh-pulse { animation: nh-pulse 1.8s ease-in-out infinite; }

@keyframes nh-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
.nh-blink { animation: nh-blink 1.1s steps(2, end) infinite; }

@keyframes nh-spin-slow {
  to { transform: rotate(360deg); }
}

/* Periodic glow for the amber period after "neohelio." — syncs to the
   orbit dot's apex cycle (5.6s) so the two brand details share a beat. */
@keyframes nh-period-glow {
  0%, 100% {
    text-shadow: 0 0 0.22em var(--nh-accent), 0 0 0.06em var(--nh-accent);
  }
  12%, 88% {
    text-shadow: 0 0 0 transparent;
  }
}
.nh-period-glow {
  animation: nh-period-glow 5.6s ease-in-out infinite;
  display: inline-block;
}

/* Tabular labels */
.nh-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--nh-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 0;
  border-bottom: 1px dashed var(--nh-line);
}
.nh-kv:last-child { border-bottom: none; }
.nh-kv .k { color: var(--nh-ink-3); text-transform: uppercase; }
.nh-kv .v { color: var(--nh-ink); }

/* Buttons */
.nh-btn {
  font-family: var(--nh-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--nh-line-2);
  background: var(--nh-btn-bg);
  color: var(--nh-ink-2);
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s ease;
}
.nh-btn:hover { border-color: var(--nh-accent); color: var(--nh-accent); }
.nh-btn-primary {
  background: var(--nh-accent);
  color: var(--nh-bg);
  border-color: var(--nh-accent);
  font-weight: 600;
}
.nh-btn-primary:hover { color: var(--nh-bg); filter: brightness(1.08); }

/* Scrollbar nuke inside artboards */
.nh-board *::-webkit-scrollbar { display: none; }
.nh-board * { scrollbar-width: none; }