/* Albastar Corp. local LLM mockups: shared tokens.
   Lifted from site/src/app/a/system.css (graphite neutrals, one violet accent, Inter).
   Type: exactly three sizes. --t-title, --t-body, --t-meta. Nothing else sets font-size. */
@font-face { font-family: 'Inter'; src: url(fonts/inter-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(fonts/jetbrains-mono-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --bg-sunk: oklch(0.165 0.004 265);
  --bg-ground: oklch(0.19 0.004 265);
  --bg-raised: oklch(0.215 0.005 265);
  --bg-hover: oklch(0.235 0.006 265);
  --bg-overlay: oklch(0.245 0.006 265);
  --bg-active: oklch(0.275 0.008 265);
  --fg-1: oklch(0.965 0.003 265);
  --fg-2: oklch(0.8 0.012 265);
  --fg-3: oklch(0.66 0.012 265);
  --line: oklch(0.285 0.006 265);
  --line-strong: oklch(0.355 0.008 265);
  --mark: oklch(0.7 0.02 265);
  --accent: oklch(0.8 0.105 285);
  --accent-line: oklch(0.7 0.13 285);
  --accent-fill: oklch(0.52 0.19 282);
  --accent-fill-hover: oklch(0.56 0.19 282);
  --accent-subtle: oklch(0.29 0.06 285);
  --on-accent: oklch(0.985 0.005 285);
  --brand-stop: #F04A2E;
  /* surfaces that sit in the thread: each its own tone */
  --bg-user: oklch(0.255 0.022 285);   /* user bubble: faint violet tint */
  --bg-code: oklch(0.145 0.004 265);    /* code blocks: recessed, darkest */
  --bg-chip: oklch(0.29 0.008 265);    /* inline code chip */
  --bg-composer: oklch(0.235 0.006 265);

  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace; /* code blocks only */
  --t-title: 600 18px/26px var(--font);
  --t-body: 400 14px/22px var(--font);
  --t-meta: 400 12px/16px var(--font);

  --r-1: 2px; --r-2: 4px; --r-3: 6px;
  --dur-1: 90ms; --dur-2: 160ms; --dur-3: 240ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--bg-ground); color: var(--fg-1); font: var(--t-body);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-2); }
::selection { background: var(--accent-subtle); }

.title { font: var(--t-title); letter-spacing: -0.01em; }
.meta { font: var(--t-meta); color: var(--fg-2); }
.dim { color: var(--fg-3); }
.strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.acc { color: var(--accent); }

/* wordmark */
.wm { font: var(--t-body); font-weight: 700; letter-spacing: 0.08em; color: var(--fg-1); text-decoration: none; }
.wm i { font-style: normal; color: var(--brand-stop); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-2);
  border: 1px solid var(--line-strong); color: var(--fg-1); transition: background var(--dur-1); white-space: nowrap; }
.btn:hover { background: var(--bg-hover); }
.btn.primary { background: var(--accent-fill); border-color: transparent; color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-fill-hover); }
.btn.ghost { border-color: transparent; color: var(--fg-2); }
.btn.ghost:hover { color: var(--fg-1); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg, .ico svg { width: 16px; height: 16px; flex: none; }
.ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-2); color: var(--fg-2); }
.ico:hover { background: var(--bg-hover); color: var(--fg-1); }

/* status dot: neutral unless live */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mark); display: inline-block; }
.dot.live { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.dot.ready { background: var(--fg-1); }
.dot.hollow { background: transparent; border: 1.5px solid var(--mark); }
.dot.pulse { background: var(--accent); animation: pulse 1.4s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* segmented tabs */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--r-3); }
.seg button { height: 28px; padding: 0 12px; border-radius: var(--r-2); color: var(--fg-2); }
.seg button:hover { color: var(--fg-1); }
.seg button[aria-selected=true] { background: var(--bg-active); color: var(--fg-1); font-weight: 500; }

/* thin progress line */
.bar { height: 4px; border-radius: 2px; background: var(--bg-active); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width var(--dur-3) var(--ease); }
.bar.indet > i { width: 30%; animation: indet 1.6s var(--ease) infinite; }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* mockup frame: a strip above the design, not part of it */
body { padding-top: 32px; }
.mock { position: fixed; inset: 0 0 auto 0; height: 32px; z-index: 50; display: flex; align-items: center; gap: 16px;
  padding: 0 12px; background: var(--bg-sunk); border-bottom: 1px dashed var(--line-strong); font: var(--t-meta); color: var(--fg-3); }
.mock .seg { padding: 1px; }
.mock .seg button { height: 22px; padding: 0 8px; font: var(--t-meta); }
.mock nav { display: flex; gap: 2px; margin-left: auto; }
.mock a { color: var(--fg-2); text-decoration: none; padding: 4px 8px; border-radius: var(--r-2); }
.mock a:hover { color: var(--fg-1); background: var(--bg-hover); }
.mock a[aria-current] { color: var(--fg-1); background: var(--bg-active); }

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