/* ============================================================
   Prelude Hub — design tokens + shared primitives
   The "Flow State" visual system (dark / glowing) in code.
   Single source of truth — every screen imports this file.
   Mirrors the Visual-system table in
   docs/plans/2026-06-17-prelude-hub-design.md
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --ph-canvas:   #0c0d14;   /* deep navy-black page */
  --ph-panel:    #13131c;
  --ph-panel-2:  #14151f;
  --ph-chrome:   #1b1d2b;
  --ph-edge:     #3a3d52;

  /* ---- ink ---- */
  --ph-white:    #ffffff;
  --ph-ink:      #eef0f7;   /* near-white body */
  --ph-muted:    #9aa0b5;
  --ph-faint:    #6a6f88;

  /* ---- signal colors ---- */
  --ph-lime:     #c6f24e;   /* primary signal / accent / glow */
  --ph-lime-2:   #9fd96a;
  --ph-cyan:     #6fd7e8;   /* secondary signal */
  --ph-cyan-2:   #cfe9ef;

  /* rgb triplets — for rgba() glows + translucent fills */
  --ph-lime-rgb:  198,242,78;
  --ph-cyan-rgb:  111,215,232;
  --ph-white-rgb: 255,255,255;

  /* ---- type ---- */
  --ph-font-ui:      'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --ph-font-display: 'Instrument Serif', Georgia, serif;
  --ph-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- shape ---- */
  --ph-radius:    16px;
  --ph-radius-sm: 12px;
}

/* ---- reset (modern-css baseline, verified via Context7) ---- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;                  /* fallback */
  min-height: 100svh;                 /* mobile-safe full height (excludes toolbars) */
  font-family: var(--ph-font-ui);
  background: var(--ph-canvas);
  color: var(--ph-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;          /* long words never force horizontal scroll */
}

img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }

/* keyboard-only focus ring */
:focus-visible { outline: 2px solid var(--ph-cyan); outline-offset: 3px; border-radius: 6px; }

/* ---- motion (the "on fire" energy) ---- */
@keyframes phGlow  { 0%,100% { opacity: .5 }        50% { opacity: 1 } }
@keyframes phPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.18) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Shared primitives — reused across screens.
   Screen-specific layout lives in each screen's own <style>.
   ============================================================ */

/* full-viewport screen shell + centered stage */
.ph-screen {
  min-height: 100vh;                  /* fallback */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 4vw, 56px);
  position: relative;
  overflow: hidden;                   /* clips decorative orbs; safe because min-height grows with content */
}
/* every flexed child can shrink below its content (no overflow) */
.ph-screen :where(.ph-stage) * { min-width: 0; }
.ph-stage { width: 100%; max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }

/* decorative glow orb (each screen positions its own) */
.ph-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }

/* translucent card */
.ph-panel {
  border-radius: var(--ph-radius);
  background: rgba(var(--ph-white-rgb), .04);
  border: 1px solid rgba(var(--ph-white-rgb), .09);
}
.ph-panel--lime {
  background: rgba(var(--ph-lime-rgb), .07);
  border-color: rgba(var(--ph-lime-rgb), .25);
}

/* type helpers */
.ph-mono  { font-family: var(--ph-font-mono); }
.ph-serif { font-family: var(--ph-font-display); }
.ph-label {
  font-family: var(--ph-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ph-faint);
}

/* pills / badges */
.ph-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--ph-font-mono); font-size: 11px; letter-spacing: .06em;
}
.ph-pill--lime { background: rgba(var(--ph-lime-rgb), .1); border: 1px solid rgba(var(--ph-lime-rgb), .3);  color: var(--ph-lime); }
.ph-pill--cyan { background: rgba(var(--ph-cyan-rgb), .1); border: 1px solid rgba(var(--ph-cyan-rgb), .28); color: var(--ph-cyan); }

/* the pulsing live dot */
.ph-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ph-lime); box-shadow: 0 0 10px var(--ph-lime);
  animation: phGlow 1.5s ease-in-out infinite;
}

/* primary "on fire" button — real :hover (was style-hover in the export) */
.ph-btn--primary {
  border: none; border-radius: 14px;
  background: var(--ph-lime); color: #13131c;
  font-weight: 800;
  display: inline-flex; align-items: center; gap: 14px;
  box-shadow: 0 0 40px rgba(var(--ph-lime-rgb), .35);
  transition: box-shadow .2s ease, transform .2s ease;   /* GPU-friendly: transform + box-shadow only */
}
/* hover effects only on real pointers (not phantom-tap on touch) */
@media (hover: hover) and (pointer: fine) {
  .ph-btn--primary:hover { box-shadow: 0 0 56px rgba(var(--ph-lime-rgb), .55); transform: translateY(-1px); }
}
/* comfortable touch targets on coarse pointers */
@media (pointer: coarse) {
  button, a { min-height: 44px; }
}

/* brand lockup */
.ph-brand { display: flex; align-items: baseline; gap: 10px; }
.ph-brand b { font-weight: 800; letter-spacing: .26em; font-size: 15px; color: var(--ph-ink); }
.ph-brand span { font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-faint); }