/**
 * Helmi Design Tokens — dark only
 * Adapted from helmi-design-system/colors_and_type.css.
 * Light-mode values are intentionally dropped: this is a developer tool.
 *
 * Color discipline (dev tool):
 *   - Neutrals (background / sidebar / muted / border / foreground) are the
 *     default canvas. Everything is grayscale unless it earns color.
 *   - --enhanced (violet)   → AI / agent activity: streaming, reasoning, status,
 *                             active view tab, focus rings.
 *   - --destructive (red)   → errors, destructive actions, destructive hint.
 *   - --success (green)     → success result pills, schema-valid, read-only hint.
 *   - --warning (amber)     → schema-invalid pills, tool-call event chips.
 */

:root {
  /* ─── Surfaces (dark) ─────────────────────────────────────────── */
  --background:         oklch(0.145 0 0);   /* page bg */
  --foreground:         oklch(0.985 0 0);   /* body text */
  --card:               oklch(0.205 0 0);   /* slightly raised */
  --card-foreground:    oklch(0.985 0 0);
  --popover:            oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);

  /* ─── Brand / primary ─────────────────────────────────────────── */
  --primary:            oklch(0.985 0 0);   /* near-white CTA */
  --primary-foreground: oklch(0.205 0 0);

  /* ─── Neutrals ────────────────────────────────────────────────── */
  --secondary:            oklch(0.269 0 0); /* chips, raised inputs */
  --secondary-foreground: oklch(0.985 0 0);
  --muted:                oklch(0.269 0 0);
  --muted-foreground:     oklch(0.708 0 0); /* placeholder, helper text */
  --accent:               oklch(0.269 0 0); /* hover surface */
  --accent-foreground:    oklch(0.985 0 0);

  /* ─── AI / enhanced (violet) ──────────────────────────────────── */
  --enhanced:           oklch(0.6287 0.1515 293.69);
  --enhanced-fg:        oklch(0.78 0.13 293.69);    /* readable on dark */
  --enhanced-bg:        oklch(0.6287 0.1515 293.69 / 0.12);
  --enhanced-border:    oklch(0.6287 0.1515 293.69 / 0.35);

  /* ─── Destructive (red) ───────────────────────────────────────── */
  --destructive:        oklch(0.637 0.237 25.331);
  --destructive-fg:     oklch(0.78 0.18 25.331);
  --destructive-bg:     oklch(0.637 0.237 25.331 / 0.14);
  --destructive-border: oklch(0.637 0.237 25.331 / 0.4);

  /* ─── Warning (amber) ─────────────────────────────────────────── */
  --warning:            oklch(0.852 0.199 91.936);
  --warning-fg:         oklch(0.852 0.199 91.936);   /* light enough for dark */
  --warning-bg:         oklch(0.852 0.199 91.936 / 0.12);
  --warning-border:     oklch(0.852 0.199 91.936 / 0.35);

  /* ─── Success (green) ─────────────────────────────────────────── */
  --success:            oklch(0.78 0.16 150);
  --success-fg:         oklch(0.82 0.16 150);
  --success-bg:         oklch(0.78 0.16 150 / 0.12);
  --success-border:     oklch(0.78 0.16 150 / 0.35);

  /* ─── Structure ───────────────────────────────────────────────── */
  --border:             oklch(0.269 0 0);
  --input:              oklch(0.269 0 0);
  --ring:               oklch(0.6287 0.1515 293.69);  /* focus = enhanced */

  /* ─── Sidebar ─────────────────────────────────────────────────── */
  --sidebar:                   oklch(0.205 0 0);
  --sidebar-foreground:        oklch(0.985 0 0);
  --sidebar-accent:            oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border:            oklch(0.269 0 0);

  /* ─── Radius ──────────────────────────────────────────────────── */
  --radius:    0.625rem;   /* 10px */
  --radius-sm: 0.375rem;   /* 6px  */
  --radius-md: 0.5rem;     /* 8px  */
  --radius-lg: 0.625rem;   /* 10px */
  --radius-xl: 0.875rem;   /* 14px */

  /* ─── Shadows ─────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.5), 0 1px 2px -1px oklch(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.5), 0 2px 4px -2px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.5), 0 4px 6px -4px oklch(0 0 0 / 0.4);

  /* ─── Typography ──────────────────────────────────────────────── */
  --font-sans: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ─── Spacing helpers (used sparingly; mostly inline) ─────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* ─── Base reset ──────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Scrollbar (matches design kit) ──────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* ─── Selection ───────────────────────────────────────────────────── */

::selection {
  background: var(--enhanced-bg);
  color: var(--foreground);
}