/* SPACEMATEE design tokens — single source of truth for both themes */
:root {
  --paper:#FCFCFA; --surface:#FFFFFF; --panel:#FAFAF8;
  --ink:#15151A; --muted:#6B6B74; --faint:#9A9AA2; --line:#E7E5DF;
  --accent:#4F46E5; --mint:#04B87E; --coral:#FF6B57; --inkdeep:#0A0A0D;
  --shadow:0 12px 28px rgba(21,21,26,.07);
  --shadow-lg:0 30px 80px rgba(21,21,26,.12);
}
[data-theme="dark"] {
  --paper:#0B0B0F; --surface:#16161C; --panel:#1B1B22;
  --ink:#F3F3F5; --muted:#A2A2AD; --faint:#6C6C79; --line:#26262E;
  --accent:#8583FF; --mint:#00E0A0; --coral:#FF7A66; --inkdeep:#050507;
  --shadow:0 12px 28px rgba(0,0,0,.5);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
}

html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink); transition:background .4s ease,color .4s ease; }
::selection { background:var(--accent); color:#fff; }
.mono { font-family:'IBM Plex Mono',monospace; }
h1,h2,.tight { letter-spacing:-.03em; }
h3 { letter-spacing:-.015em; }
a,button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* surfaces */
.card { background:var(--surface); border:1px solid var(--line); transition:border-color .2s,transform .2s,box-shadow .2s; }
.card-hover:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.chip { background:var(--panel); border:1px solid var(--line); }
.dot-grid { background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:22px 22px; }

/* tints */
.tint-accent { background:color-mix(in srgb,var(--accent) 12%,transparent); }
.tint-mint   { background:color-mix(in srgb,var(--mint) 14%,transparent); }
.tint-coral  { background:color-mix(in srgb,var(--coral) 14%,transparent); }

/* buttons */
.btn-dark { background:var(--ink); color:var(--paper); transition:transform .18s,opacity .18s; }
.btn-dark:hover { opacity:.9; transform:translateY(-1px); }
.btn-ghost { border:1px solid var(--line); background:var(--surface); transition:border-color .18s; }
.btn-ghost:hover { border-color:var(--ink); }

/* fields */
.field { background:var(--surface); border:1px solid var(--line); transition:border-color .18s,box-shadow .18s; color:var(--ink); }
.field::placeholder { color:var(--faint); }
.field:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent); outline:none; }

/* nav */
.nav-shadow { transition:box-shadow .3s,background .3s; }
.nav-shadow.scrolled { background:color-mix(in srgb,var(--paper) 85%,transparent); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line); }
.nav-item { color:var(--muted); transition:background .15s,color .15s; }
.nav-item:hover { background:color-mix(in srgb,var(--ink) 5%,transparent); color:var(--ink); }
.nav-item[data-active="true"] { background:var(--ink); color:var(--paper); }

/* theme toggle */
.theme-toggle { width:52px; height:26px; border-radius:999px; border:1px solid var(--line); background:var(--surface); position:relative; cursor:pointer; flex-shrink:0; }
.theme-toggle .knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:999px; background:var(--ink); display:flex; align-items:center; justify-content:center; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
[data-theme="dark"] .theme-toggle .knob { transform:translateX(26px); }
.theme-toggle svg { width:10px; height:10px; }
.sun { display:none; } .moon { display:block; }
[data-theme="dark"] .sun { display:block; } [data-theme="dark"] .moon { display:none; }

/* illustrated image slots */
.ph { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--accent),#7C7BFF 55%,#38BDF8); }
.ph svg { position:absolute; inset:0; width:100%; height:100%; }
.img-hover .ph { transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.img-hover:hover .ph { transform:scale(1.03); }

/* terminal */
.term-cursor { display:inline-block; width:7px; height:14px; background:var(--mint); margin-left:2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* tabs */
.tab { position:relative; color:var(--muted); transition:color .2s; }
.tab[data-active="true"] { color:var(--ink); }
.tab[data-active="true"]::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); border-radius:2px; }

/* chat bubbles */
.bubble-me { background:var(--ink); color:var(--paper); border-radius:16px 16px 4px 16px; }
.bubble-them { background:var(--surface); border:1px solid var(--line); border-radius:16px 16px 16px 4px; }

/* misc */
.scrollx::-webkit-scrollbar { display:none; } .scrollx { -ms-overflow-style:none; scrollbar-width:none; }
.bar { background:var(--accent); border-radius:4px 4px 0 0; transition:height .6s cubic-bezier(.2,.8,.2,1); }
.tl-line { position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--line); }

@media (prefers-reduced-motion:reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* Landing hero location select — themed for light & dark */
.hero-select { appearance:none; -webkit-appearance:none; background:transparent; color:var(--ink); }
.hero-select option { background:var(--surface); color:var(--ink); }