/* LIVING PRESENCE™ APP — theme tokens + glass component library (V1 foundation)
   All colors/spacing flow from tokens. Components: .glass .card .btn .chip .list-item
   .placeholder .empty .kv .veil — compose these; do not invent parallel ones. */

:root{
  /* palette — precision instrument (ART_DIRECTION: white/ice on void; color = information) */
  --void:#04070f; --panel:rgba(255,255,255,0.035); --line:rgba(255,255,255,0.08);
  --ice:#dfeaf5; --dim:#7c8494; --faint:#565e6b; --text:rgba(242,246,251,0.94); --body:#aab3c2;
  --breath:#7db8e8; --heart:#ff8f7a; --brain:#8fa8ff; --nervous:#b89aff;
  --fascia:#e8d9a0; --lymph:#86e29b; --biofield:#7dc9a8;
  --accent:#7fb2ff; --accent2:#ffb060;   /* HSI: electric ice-blue + the orange-gold core */
  /* rhythm */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:52px;
  --nav-w:212px; --tab-h:62px;
  --ease:cubic-bezier(.22,.8,.3,1); --slow:700ms;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--void)}
body{font:300 15px/1.7 system-ui,-apple-system,sans-serif;color:var(--text)}
a{color:var(--accent);text-decoration:none}

/* ── ambient veil (quiet aurora; NOT the engine — just atmosphere) ── */
.veil{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.5;
  background:
    radial-gradient(60vmax 60vmax at 15% -10%, rgba(70,120,255,0.10), transparent 60%),
    radial-gradient(70vmax 55vmax at 110% 110%, rgba(255,150,60,0.05), transparent 60%);}

/* ── glass ── */
.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)}

/* ── top navigation (the only chrome) ── */
#topnav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:16px 4vw;background:linear-gradient(rgba(4,7,15,0.92),rgba(4,7,15,0))}
#topnav .brand{display:flex;align-items:center;gap:10px;font:400 17px/1 Georgia,'Times New Roman',serif;color:var(--text);letter-spacing:0.02em;text-decoration:none}
#topnav .brand i{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(190,215,255,0.7);box-shadow:0 0 12px rgba(127,178,255,0.5), inset 0 0 6px rgba(127,178,255,0.5)}
#topnav nav{display:flex;gap:clamp(14px,3vw,34px)}
#topnav nav a{font:400 12.5px/1 system-ui;letter-spacing:0.06em;color:#9aa6b8;text-decoration:none;padding-bottom:6px;transition:color 500ms}
#topnav nav a.on{color:var(--text);border-bottom:1.5px solid rgba(190,215,255,0.7)}
#topnav nav a:hover{color:var(--text)}
/* ── main outlet ── */
main{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:86px var(--sp-4) var(--sp-5)}
.view{animation:vin var(--slow) var(--ease)}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view > header{margin-bottom:var(--sp-4)}
.view > header h1{margin:0 0 6px;font:250 clamp(26px,3.6vw,36px)/1.2 system-ui;color:var(--text)}
.view > header p{margin:0;color:var(--dim);font-size:13.5px;letter-spacing:0.04em}

/* ── components ── */
.card{border-radius:var(--r-md);padding:var(--sp-3)}
.card h3{margin:0 0 6px;font:400 11px/1 system-ui;letter-spacing:0.22em;color:var(--ice)}
.card p{margin:0;color:var(--body);font-size:13.5px}
.grid{display:grid;gap:var(--sp-2)}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.btn{display:inline-block;cursor:pointer;background:linear-gradient(100deg,rgba(127,178,255,0.12),rgba(255,176,96,0.08));
  border:1px solid rgba(127,178,255,0.42);border-radius:var(--r-pill);color:#eaf8ff;
  font:400 12.5px/1 system-ui;letter-spacing:0.12em;padding:14px 28px;transition:all 500ms var(--ease)}
.btn:hover{border-color:rgba(127,178,255,0.85)}
.btn.quiet{background:none;border-color:var(--line);color:var(--dim)}
.btn.danger{border-color:rgba(255,110,90,0.4);color:#e2a396;background:none}
.chip{display:inline-block;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 13px;font:400 10px/1 system-ui;letter-spacing:0.16em;color:var(--dim)}
.list-item{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
  padding:15px 4px;border-bottom:1px solid var(--line);color:var(--body);font-size:13.5px}
.kv{display:flex;justify-content:space-between;gap:var(--sp-2);padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.kv b{font-weight:400;color:var(--dim);letter-spacing:0.1em;font-size:11px}

/* placeholder + empty states — every one carries its extension hook name */
.placeholder{border:1px dashed rgba(255,255,255,0.14);border-radius:var(--r-md);
  padding:var(--sp-4);text-align:center;color:var(--faint);font-size:12.5px;letter-spacing:0.06em}
.placeholder code{display:block;margin-top:8px;font:400 10.5px/1.6 ui-monospace,monospace;color:var(--dim)}
.empty{text-align:center;color:var(--faint);padding:var(--sp-5) 0;font-size:13px}
.empty i{display:block;width:8px;height:8px;border-radius:50%;background:var(--ice);opacity:0.4;margin:0 auto 16px}

/* ── responsive ── */
@media (max-width:900px){
  main{padding:76px var(--sp-3) var(--sp-5)}
  #topnav nav a{font-size:11px;letter-spacing:0.04em}
}