/* beyond a.i. · Unified Design System · v1.0 */
/* Tokens + Themes + Base Components (portal/gabi/shelter) */

/* ═══════════════════════════════════════════════
   UNIFIED DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px; --s9:64px; --s10:96px;

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;

  --ease: cubic-bezier(.22,.68,0,1.1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────
   THEME A · portal
   ───────────────────────────────────────────── */
[data-theme="portal"] {
  --bg-deep:#03050a; --bg:#060a12;
  --bg-panel:rgba(8,13,22,.78); --bg-panel2:rgba(8,13,22,.52);
  --bg-lift:rgba(255,255,255,.04); --bg-hover:rgba(255,255,255,.07);

  --line:rgba(255,255,255,.09); --line-mid:rgba(255,255,255,.14); --line-hi:rgba(255,255,255,.22);

  --text:rgba(255,255,255,.92); --muted:rgba(200,215,235,.60);
  --accent:rgba(180,210,255,.90); --accent-dim:rgba(140,175,230,.40);

  --glow-top:radial-gradient(1200px 480px at 50% -5%, rgba(160,200,255,.11), transparent 60%);
  --glow-left:radial-gradient(700px 400px at 0% 30%, rgba(100,160,240,.07), transparent 55%);
  --glow-right:radial-gradient(700px 400px at 100% 50%, rgba(200,220,255,.04), transparent 55%);

  --sigil-bg:rgba(160,200,255,.08); --sigil-line:rgba(160,200,255,.25);
  --tag-bg:rgba(160,200,255,.10); --tag-text:rgba(180,215,255,.90);
}

/* ─────────────────────────────────────────────
   THEME B · gabi
   ───────────────────────────────────────────── */
[data-theme="gabi"] {
  --bg-deep:#07050a; --bg:#0d0a0e;
  --bg-panel:rgba(18,13,16,.78); --bg-panel2:rgba(15,11,14,.52);
  --bg-lift:rgba(255,235,200,.03); --bg-hover:rgba(255,230,190,.06);

  --line:rgba(255,220,170,.08); --line-mid:rgba(255,220,160,.13); --line-hi:rgba(255,220,150,.20);

  --text:rgba(252,245,235,.92); --muted:rgba(220,200,175,.58);
  --accent:rgba(255,210,130,.88); --accent-dim:rgba(230,185,100,.35);

  --glow-top:radial-gradient(1200px 500px at 50% -8%, rgba(255,200,100,.08), transparent 60%);
  --glow-left:radial-gradient(600px 400px at 0% 40%, rgba(200,150,80,.06), transparent 55%);
  --glow-right:radial-gradient(600px 500px at 100% 30%, rgba(255,180,80,.04), transparent 60%);

  --sigil-bg:rgba(255,200,100,.07); --sigil-line:rgba(255,200,100,.22);
  --tag-bg:rgba(255,200,100,.10); --tag-text:rgba(255,220,140,.90);
}

/* ─────────────────────────────────────────────
   THEME C · shelter
   ───────────────────────────────────────────── */
[data-theme="shelter"] {
  --bg-deep:#020704; --bg:#040c06;
  --bg-panel:rgba(5,14,8,.80); --bg-panel2:rgba(4,11,6,.55);
  --bg-lift:rgba(100,255,140,.03); --bg-hover:rgba(100,255,140,.05);

  --line:rgba(80,200,100,.10); --line-mid:rgba(80,200,100,.16); --line-hi:rgba(80,200,100,.24);

  --text:rgba(220,255,230,.92); --muted:rgba(140,210,160,.58);
  --accent:rgba(100,240,140,.85); --accent-dim:rgba(80,200,110,.35);

  --glow-top:radial-gradient(1000px 400px at 50% -5%, rgba(60,200,80,.09), transparent 60%);
  --glow-left:radial-gradient(600px 400px at 0% 50%, rgba(40,160,60,.07), transparent 55%);
  --glow-right:radial-gradient(600px 400px at 100% 40%, rgba(80,200,100,.04), transparent 55%);

  --sigil-bg:rgba(80,220,110,.08); --sigil-line:rgba(80,220,100,.22);
  --tag-bg:rgba(80,200,100,.10); --tag-text:rgba(130,240,160,.90);
}

/* ═══════════════════════════════════════════════
   BASE COMPONENTS
   ═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--font-body); font-size:15px; line-height:1.6;
  color:var(--text,#eee); background-color:var(--bg);
  background-image:var(--glow-top),var(--glow-left),var(--glow-right),var(--grain);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
.bai-wrap{max-width:960px;margin:0 auto;padding:var(--s8) var(--s4) var(--s10)}
.bai-shell{
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:linear-gradient(170deg,var(--bg-panel),var(--bg-panel2));
  box-shadow:0 24px 80px rgba(0,0,0,.6), inset 0 1px 0 var(--line-mid);
  overflow:hidden;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  animation:shellIn .6s var(--ease-out) both;
}
@keyframes shellIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.bai-header{padding:var(--s7) var(--s7) var(--s6);border-bottom:1px solid var(--line)}
.bai-brand{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s5)}
.bai-sigil{
  width:44px;height:44px;flex-shrink:0;border-radius:var(--r-md);
  border:1px solid var(--sigil-line); background:var(--sigil-bg);
  display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;
}
.bai-sigil::after{content:'';position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 18px var(--accent-dim);opacity:.5;pointer-events:none}
.bai-site-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s1);opacity:.8}
h1.bai-h1{margin:0;font-family:var(--font-display);font-size:clamp(22px,4vw,30px);font-weight:400;letter-spacing:.01em;line-height:1.2}
.bai-sub{margin:var(--s2) 0 0;color:var(--muted);max-width:58ch;font-size:14px}
.bai-tags{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.bai-tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  padding:4px 10px;border-radius:99px;background:var(--tag-bg);color:var(--tag-text);
  border:1px solid var(--line-mid);
}
.bai-cta-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
.bai-btn{
  display:inline-flex;align-items:center;gap:var(--s3);padding:10px 16px;
  border-radius:var(--r-md);border:1px solid var(--line-mid);background:var(--bg-lift);
  color:var(--text);text-decoration:none;font-size:13px;font-family:var(--font-body);font-weight:500;
  cursor:pointer;transition:background .15s,border-color .15s,transform .15s var(--ease);
}
.bai-btn:hover{background:var(--bg-hover);border-color:var(--line-hi);transform:translateY(-1px)}
.bai-btn.primary{background:rgba(255,255,255,.08);border-color:var(--line-hi)}
.bai-btn small{color:var(--muted);font-size:11px}
.bai-main{padding:var(--s6) var(--s7) var(--s7)}
.bai-section{padding:var(--s5) 0 var(--s4)}
.bai-section + .bai-section{border-top:1px solid var(--line);margin-top:var(--s4)}
h2.bai-h2{font-family:var(--font-display);font-weight:400;font-size:20px;margin:0 0 var(--s3);letter-spacing:.01em}
.bai-lead{color:var(--muted);margin:0 0 var(--s5);font-size:14px;line-height:1.65}
.bai-pill-grid{display:grid;gap:var(--s3)}
@media(min-width:680px){.bai-pill-grid{grid-template-columns:repeat(3,1fr)}}
.bai-pill{border:1px solid var(--line);background:var(--bg-lift);border-radius:var(--r-md);padding:var(--s4) var(--s4) var(--s3);transition:border-color .2s,background .2s}
.bai-pill:hover{border-color:var(--line-hi);background:var(--bg-hover)}
.bai-pill .k{font-weight:600;font-size:14px}
.bai-pill .d{color:var(--muted);margin-top:var(--s2);font-size:13px}
.bai-box{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:var(--r-lg);padding:var(--s5)}
.bai-box.soft{border-style:dashed;background:rgba(255,255,255,.015)}
.bai-box.accent-line{border-left:2px solid var(--accent-dim)}
.bai-days{display:grid;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:680px){.bai-days{grid-template-columns:1fr 1fr}}
.bai-day{border:1px solid var(--line);background:var(--bg-lift);border-radius:var(--r-sm);padding:var(--s3) var(--s4);font-size:13px;transition:border-color .2s}
.bai-day:hover{border-color:var(--line-mid)}
.bai-day b{display:block;margin-bottom:3px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--accent)}
.bai-hr{height:1px;background:var(--line);margin:var(--s5) 0}
.bai-footer{
  padding:var(--s4) var(--s7) var(--s6);
  border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-family:var(--font-mono);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);letter-spacing:.04em;
}
.bai-footer a{color:var(--accent-dim);text-decoration:none}
.bai-footer a:hover{color:var(--accent)}
.bai-status{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.bai-status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
.bai-node-grid{display:grid;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:680px){.bai-node-grid{grid-template-columns:1fr 1fr 1fr}}
.bai-node{border:1px solid var(--line);background:var(--bg-lift);border-radius:var(--r-md);padding:var(--s4);position:relative;overflow:hidden}
.bai-node::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-dim) 0%,transparent 60%);opacity:.04;pointer-events:none}
.bai-node .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--accent);margin-bottom:var(--s2)}
.bai-node .v{font-size:14px;font-weight:500}
.bai-node .d{color:var(--muted);font-size:12px;margin-top:var(--s1)}
.bai-mini{font-size:12px;color:var(--muted);margin-top:var(--s4);font-family:var(--font-mono);letter-spacing:.03em}
.anchor{scroll-margin-top:var(--s5)}