/* Instar — shared design tokens (dashboard + chat).
 *
 * Single source of truth for color, type, radius, spacing, and shadow values.
 * Load this BEFORE style.css / chat.css in every entry HTML file — those files
 * now only define page-specific rules, not the base palette.
 *
 * Previously the dashboard (style.css) and chat (chat.css) each defined their
 * own :root with different accent greens, border tints, and radius scales.
 * This file merges them onto the chat palette (softer accent green, cooler
 * near-black surfaces) since it read as the more deliberate/designed of the
 * two — the dashboard's pure-neutral grays + neon #00ff88 accent felt more
 * "hacker toy" than "professional product" by comparison.
 */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #05090a;
  --bg-primary: #05090a;
  --bg-1: #0a0f11;
  --bg-secondary: #0a0f11;
  --bg-2: #0f1417;
  --bg-tertiary: #0f1417;
  --bg-hover: #161c1f;

  /* Borders */
  --border: #1d2528;
  --border-focus: #2f3a3d;

  /* Text */
  --text: #d8e0dc;
  --text-primary: #d8e0dc;
  --text-dim: #8a938f;
  --text-secondary: #8a938f;
  --text-muted: #5f6864;

  /* Accent — unified on the softer chat green (was #00ff88 neon on dashboard). */
  --accent: #4dd08b;
  --accent-dim: #2a7f56;
  --accent-bright: #6be6a6;

  /* Semantic */
  --danger: #e06767;
  --danger-dim: #7a3838;
  --warning: #e7b85c;
  --warn: #e7b85c;
  /* alias — chat.css historically used --warn */
  --info: #5b9bd5;
  --success: var(--accent);

  /* Chat bubble surfaces (kept distinct from generic bg/border tokens). */
  --user-bubble: #132720;
  --user-border: #1f4a36;
  --agent-bubble: #0d1417;
  --agent-border: #1d2528;

  /* Typography — Inter for UI/prose, monospace kept for the terminal-y accents
     (prompt glyphs, numbers, logs, chat title) that are part of the brand. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code",
    Menlo, Consolas, monospace;

  /* Radius scale — was a single flat 6px (dashboard) / 10px+8px (chat).
     Slightly larger + a real scale reads more modern than tight boxy corners. */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Spacing scale — for new/refactored components; legacy ad-hoc padding
     values are left as-is unless touched directly. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);

  /* Safe area (mobile / PWA) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Inter — self-hosted (CSP is font-src 'self', no CDN fonts allowed) ──── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
}

/* ── Icon utility ─────────────────────────────────────────────────────────
 * Lucide SVGs vendored under /icons/ui/*.svg, tinted via CSS mask so a single
 * file works in any color via `currentColor` (dim, accent, danger, etc).
 * Usage: <span class="icon icon-settings" aria-hidden="true"></span>
 */
.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: -3px;
}
.icon-sm {
  width: 14px;
  height: 14px;
}
.icon-lg {
  width: 22px;
  height: 22px;
}

.icon-layout-dashboard { --icon-url: url("/icons/ui/layout-dashboard.svg"); }
.icon-gauge { --icon-url: url("/icons/ui/gauge.svg"); }
.icon-message-square { --icon-url: url("/icons/ui/message-square.svg"); }
.icon-messages-square { --icon-url: url("/icons/ui/messages-square.svg"); }
.icon-bot { --icon-url: url("/icons/ui/bot.svg"); }
.icon-settings { --icon-url: url("/icons/ui/settings.svg"); }
.icon-sparkles { --icon-url: url("/icons/ui/sparkles.svg"); }
.icon-calendar-clock { --icon-url: url("/icons/ui/calendar-clock.svg"); }
.icon-wallet { --icon-url: url("/icons/ui/wallet.svg"); }
.icon-briefcase { --icon-url: url("/icons/ui/briefcase.svg"); }
.icon-bitcoin { --icon-url: url("/icons/ui/bitcoin.svg"); }
.icon-bar-chart-3 { --icon-url: url("/icons/ui/bar-chart-3.svg"); }
.icon-fingerprint { --icon-url: url("/icons/ui/fingerprint.svg"); }
.icon-scroll-text { --icon-url: url("/icons/ui/scroll-text.svg"); }
.icon-terminal { --icon-url: url("/icons/ui/terminal.svg"); }
.icon-brain { --icon-url: url("/icons/ui/brain.svg"); }
.icon-book-open { --icon-url: url("/icons/ui/book-open.svg"); }
.icon-newspaper { --icon-url: url("/icons/ui/newspaper.svg"); }
.icon-git-branch { --icon-url: url("/icons/ui/git-branch.svg"); }
.icon-archive { --icon-url: url("/icons/ui/archive.svg"); }
.icon-help-circle { --icon-url: url("/icons/ui/help-circle.svg"); }
.icon-menu { --icon-url: url("/icons/ui/menu.svg"); }
.icon-x { --icon-url: url("/icons/ui/x.svg"); }
.icon-chevron-down { --icon-url: url("/icons/ui/chevron-down.svg"); }
.icon-chevron-up { --icon-url: url("/icons/ui/chevron-up.svg"); }
.icon-chevron-left { --icon-url: url("/icons/ui/chevron-left.svg"); }
.icon-chevron-right { --icon-url: url("/icons/ui/chevron-right.svg"); }
.icon-search { --icon-url: url("/icons/ui/search.svg"); }
.icon-more-horizontal { --icon-url: url("/icons/ui/more-horizontal.svg"); }
.icon-paperclip { --icon-url: url("/icons/ui/paperclip.svg"); }
.icon-mic { --icon-url: url("/icons/ui/mic.svg"); }
.icon-send { --icon-url: url("/icons/ui/send.svg"); }
.icon-plus { --icon-url: url("/icons/ui/plus.svg"); }
.icon-trash-2 { --icon-url: url("/icons/ui/trash-2.svg"); }
.icon-tag { --icon-url: url("/icons/ui/tag.svg"); }
.icon-copy { --icon-url: url("/icons/ui/copy.svg"); }
.icon-pencil { --icon-url: url("/icons/ui/pencil.svg"); }
.icon-check { --icon-url: url("/icons/ui/check.svg"); }
.icon-pin { --icon-url: url("/icons/ui/pin.svg"); }
.icon-pin-off { --icon-url: url("/icons/ui/pin-off.svg"); }
.icon-lock { --icon-url: url("/icons/ui/lock.svg"); }
.icon-reply { --icon-url: url("/icons/ui/reply.svg"); }
.icon-download { --icon-url: url("/icons/ui/download.svg"); }
.icon-shield-alert { --icon-url: url("/icons/ui/shield-alert.svg"); }