/* ============================================================================
 * Cortex RAG — shared IBM Carbon design system (Gray 10 / "White" theme).
 *
 * Single source of truth for design tokens, typography, and base components
 * across every operator UI. Pages link this first, then layer their own
 * structural CSS on top. Tokens cover BOTH naming vocabularies in use
 * (--accent/--panel and the Carbon-named --interactive/--layer/--tag-*) so a
 * page can drop its local :root block and inherit everything from here.
 *
 * References: IBM Carbon Design System — color tokens, productive type scale,
 * 8px spacing grid, and component anatomy (buttons, text input, tag, tile).
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ── Backgrounds / layers ───────────────────────────────────────────── */
  --bg: #ffffff;              /* background */
  --panel: #f4f4f4;           /* layer-01 (legacy alias) */
  --layer: #f4f4f4;           /* layer-01 */
  --layer-2: #e0e0e0;         /* layer-02 */
  --field: #f4f4f4;           /* field-01 */
  --hover-row: #e8e8e8;       /* layer-hover-01 */

  /* ── Borders ────────────────────────────────────────────────────────── */
  --border: #e0e0e0;          /* border-subtle (legacy alias) */
  --border-subtle: #e0e0e0;
  --border-strong: #8d8d8d;

  /* ── Text ───────────────────────────────────────────────────────────── */
  --text: #161616;            /* text-primary */
  --muted: #525252;           /* text-secondary (legacy alias) */
  --text-2: #525252;          /* text-secondary */
  --placeholder: #a8a8a8;     /* text-placeholder */

  /* ── Interactive / links / focus ────────────────────────────────────── */
  --accent: #0f62fe;          /* blue-60 (legacy alias) */
  --accent-hover: #0353e9;    /* blue-70 (legacy alias) */
  --interactive: #0f62fe;
  --interactive-hover: #0353e9;
  --link: #0f62fe;            /* link-primary */
  --link-hover: #0043ce;      /* link-primary-hover */
  --focus: #0f62fe;

  /* ── Support / status ───────────────────────────────────────────────── */
  --success: #24a148;
  --error: #da1e28;
  --warning: #b28600;
  --user: #d0e2ff;            /* blue-20 — chat bubble */

  /* ── Tags (Carbon tag color pairs) ──────────────────────────────────── */
  --tag-green-bg: #a7f0ba;  --tag-green-text: #0e6027;
  --tag-red-bg: #ffd7d9;    --tag-red-text: #a2191f;
  --tag-blue-bg: #d0e2ff;   --tag-blue-text: #0043ce;
  --tag-gray-bg: #e0e0e0;   --tag-gray-text: #393939;
  --tag-yellow-bg: #fcf4d6; --tag-yellow-text: #684e00;

  /* ── Spacing scale (Carbon 8px grid) ────────────────────────────────── */
  --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px;

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Reset / base ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; border-radius: 0; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.45 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code, pre { font-family: var(--font-mono); }

::selection { background: var(--user); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c6c6c6; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Carbon focus ring — 2px inset interactive outline. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ── Buttons (Carbon button anatomy) ──────────────────────────────────── */
button {
  font: 400 14px/1.2 var(--font-sans);
  cursor: pointer;
  background: var(--interactive);
  border: 1px solid transparent;
  color: #fff;
  padding: 8px 14px;
  transition: background .07s;
}
button:hover { background: var(--interactive-hover); }
button:disabled { opacity: .4; cursor: not-allowed; }

button.secondary, button.ghost, button.tertiary {
  background: transparent;
  color: var(--interactive);
  border: 1px solid var(--interactive);
}
button.secondary:hover, button.tertiary:hover { background: var(--interactive); color: #fff; }
button.ghost { border-color: transparent; }
button.ghost:hover { background: var(--hover-row); color: var(--interactive); }
button.danger { background: var(--error); }
button.danger:hover { background: #b81921; }

/* ── Form fields (Carbon text input — single bottom rule, inset focus) ── */
input, select, textarea {
  font: 400 14px/1.4 var(--font-sans);
  color: var(--text);
  background: var(--field);
  border: none;
  border-bottom: 1px solid var(--border-strong);
  padding: 8px 12px;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ── Tags / badges (Carbon tag — pill, color pairs) ───────────────────── */
.tag {
  display: inline-flex; align-items: center;
  font: 500 11.5px/1 var(--font-sans);
  border-radius: 24px; padding: 4px 10px;
  background: var(--tag-gray-bg); color: var(--tag-gray-text);
}
.tag.green  { background: var(--tag-green-bg);  color: var(--tag-green-text); }
.tag.red    { background: var(--tag-red-bg);    color: var(--tag-red-text); }
.tag.blue   { background: var(--tag-blue-bg);   color: var(--tag-blue-text); }
.tag.yellow { background: var(--tag-yellow-bg); color: var(--tag-yellow-text); }

/* ── Data table (Carbon-style) ────────────────────────────────────────── */
table.carbon { border-collapse: collapse; width: 100%; background: var(--layer); }
table.carbon th, table.carbon td { text-align: left; padding: 7px 16px; font-size: 13px; border-bottom: 1px solid var(--bg); }
table.carbon th { background: var(--layer-2); font-weight: 600; }
table.carbon tr:hover td { background: var(--hover-row); }