/* ========================================================================
   Pythagorean Hub — shared style
   Palette: Cold Lab + Lightning (B locked, 2026-04-28)
   ======================================================================== */

/* ========================================================================
   Theme system: Palantir (default) + Navigator (toggle)
   Set body class to `theme-palantir` (default) or `theme-navigator`.
   The :root values ARE the Palantir palette so pages without a class still
   get the canonical look. Navigator overrides via body.theme-navigator below.
   ======================================================================== */

:root,
body.theme-palantir {
  /* PALANTIR — intel-deck / cold-lab / cyan-red */

  /* environment */
  --bg-0: #000000;
  --bg-1: #0a0d12;
  --bg-2: #14181f;
  --bg-3: #1c2330;
  --rule: rgba(255,255,255,0.14);
  --rule-strong: rgba(255,255,255,0.28);

  /* text — brightened across tiers for better legibility on dark scenes */
  --fg-0: #fbfcfe;
  --fg-1: #e4e9f0;
  --fg-2: #c4ccd6;
  --fg-3: #8e96a3;

  /* accents */
  --cyan: #00f0ff;          /* active states only — sparingly */
  --cyan-soft: #7AE8FF;     /* secondary cyan, data values */
  --red: #ff2a1f;           /* sparks, electric */
  --red-cta: #FF5A6A;       /* critical actions, CTA hover */
  --gold: #e8c87a;          /* legacy / sparing */

  /* portal RGB tokens — used by vestibule-atmosphere.css for theme-aware
     transparency. Mirror the palette: tint = cyan-soft, gold = gold. */
  --portal-tint-rgb: 122, 232, 255;
  --portal-gold-rgb: 232, 200, 122;

  /* scene-bg recipe (referenced by html/body bg below) */
  --scene-bg-center: #0e131c;
  --scene-bg-mid:    #07090d;
  --scene-bg-edge:   #03040a;
  /* panel/card backgrounds — used by hub cards, side panels, popups */
  --panel-bg:        rgba(10,13,18,0.55);
  --panel-bg-hover:  rgba(20,24,31,0.85);
  --panel-bg-strong: rgba(10,13,18,0.85);
  --panel-bg-soft:   rgba(10,13,18,0.60);
  --cyan-glow:       rgba(0,240,255,0.45);

  /* type */
  --serif: "Instrument Serif", "EB Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* NAVIGATOR — celestial-chart / cream-gold-copper / warm sepia
   (extracted from globe-cesium.html, authored by Rick — backgrounds bumped warmer
    so the visual contrast between themes is obvious, not just subtle palette swap) */
body.theme-navigator {
  --bg-0: #1a1208;   /* warm sepia */
  --bg-1: #221808;
  --bg-2: #2c1f0e;
  --bg-3: #3a2814;
  --rule:        rgba(244,200,122,0.14);
  --rule-strong: rgba(244,200,122,0.26);

  --fg-0: #f5e6c8;   /* cream-white */
  --fg-1: #d4c5a3;   /* warm parchment */
  --fg-2: #a8997a;   /* aged paper */
  --fg-3: #6e6248;   /* dust */

  --cyan-soft: #e8d4a3;   /* warm cream (replaces cyan-soft slot) */
  --cyan:      #f4c87a;   /* gold (replaces cyan slot) */
  --red:       #ff7a3a;   /* warning ember */
  --red-cta:   #d6985e;   /* copper */

  /* portal RGB tokens — navigator: warm cream tint, copper gold */
  --portal-tint-rgb: 232, 212, 163;   /* warm cream */
  --portal-gold-rgb: 214, 152, 94;    /* copper */

  /* Background is now obviously warm sepia, not "very slightly less cool dark" */
  --scene-bg-center: #2a1c0a;
  --scene-bg-mid:    #14100a;
  --scene-bg-edge:   #06040a;

  /* Warm-tinted panel surfaces so cards on the hub also reflect navigator */
  --panel-bg:        rgba(34,24,8,0.65);
  --panel-bg-hover:  rgba(50,36,16,0.88);
  --panel-bg-strong: rgba(34,24,8,0.88);
  --panel-bg-soft:   rgba(34,24,8,0.65);
  --cyan-glow:       rgba(244,200,122,0.42);
}

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap");

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  /* Unified scene background — uses theme-defined color stops so it shifts
     between Palantir (cool) and Navigator (warm) automatically. */
  background:
    radial-gradient(ellipse at 50% 40%, var(--scene-bg-center) 0%, var(--scene-bg-mid) 55%, transparent 100%),
    var(--scene-bg-edge);
  color: var(--fg-1);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Film-grain overlay — subtle "depth" texture (matches helix/roadmap) */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  z-index: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ---- ambient layers (lightning canvas + grain) ---- */
.bg-fx {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
#lightning-canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
}
.grain {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
}

/* ---- foreground layer wrap ---- */
.page {
  position: relative; z-index: 2;
  min-height: 100vh;
  padding: 40px 32px;
  max-width: 1500px;
  margin: 0 auto;
}

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--fg-0);
}
h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; }
h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; }
h3 { font-size: 18px; }

.serif-italic { font-family: var(--serif); font-style: italic; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.lede {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--fg-2); max-width: 720px;
}

code, .mono { font-family: var(--mono); font-size: 13px; color: var(--cyan-soft); }

a { color: var(--cyan-soft); text-decoration: none; }
a:hover { color: var(--cyan); }

/* ---- nav back-to-hub ---- */
.back-link {
  position: fixed; top: 14px; left: 16px; z-index: 9999;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-2);
  padding: 7px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: #0a0d12;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  transition: all 0.2s;
}
.back-link:hover { border-color: var(--red-cta); color: var(--fg-0); }
.back-link::before { content: "← "; color: var(--red); }

/* ---- panel/card primitives ---- */
.panel {
  background: rgba(20,24,31,0.7);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 18px 22px;
  backdrop-filter: blur(12px);
  position: relative;
}
.panel::before {
  content: ""; position: absolute; top: -1px; right: -1px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--red); border-right: 1px solid var(--red);
  pointer-events: none;
}

/* ---- buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-0);
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: 10px 20px; border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.btn:hover {
  border-color: var(--red);
  color: var(--fg-0);
  box-shadow: 0 0 24px rgba(255,42,31,0.25), inset 0 0 0 1px rgba(255,42,31,0.15);
}
.btn-cyan { border-color: var(--cyan); color: var(--cyan); }
.btn-cyan:hover {
  border-color: var(--cyan); color: var(--bg-0); background: var(--cyan);
  box-shadow: 0 0 30px rgba(0,240,255,0.4);
}

/* ---- data readouts ---- */
.readout {
  background: rgba(10,13,18,0.6);
  border: 1px solid var(--rule);
  padding: 9px 13px;
  border-radius: 2px;
  font-family: var(--mono); font-size: 12px;
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.readout .lbl { color: var(--fg-3); font-size: 11px; letter-spacing: 0.05em; }
.readout .v { color: var(--cyan-soft); }

/* ---- hairline grid utility ---- */
.hairline-grid {
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.hairline-grid > * { background: var(--bg-1); padding: 14px; }

/* ---- helpers ---- */
.hr {
  height: 1px; border: 0;
  background: linear-gradient(to right, transparent, var(--rule-strong), transparent);
  margin: 24px 0;
}
.muted { color: var(--fg-3); }
.spark { color: var(--red); }

/* ---- scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); }