/* LiveTools Ops — design tokens v0.1
   Font: IBM Plex Sans + IBM Plex Mono (Google Fonts)
   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); */

:root {
  /* Ink — neutrals */
  --ink-900: #12161a;  /* sidebar, dark bars, tooltips */
  --ink-800: #1a1d21;  /* primary text, headings */
  --ink-700: #2a3138;  /* long-form body */
  --ink-600: #3a424b;  /* secondary buttons text */
  --ink-500: #5b636b;  /* secondary text */
  --ink-400: #77808a;  /* labels, meta */
  --ink-300: #98a0a8;  /* placeholder, disabled text */
  --ink-200: #c3c9cf;  /* disabled fill, chart neutral */
  --ink-150: #d7dbdf;  /* input border */
  --ink-100: #e3e6e9;  /* card border */
  --ink-75:  #eef0f2;  /* row divider */
  --ink-50:  #f4f5f6;  /* app background */
  --ink-25:  #fafbfb;  /* table header, subtle fill */
  --white:   #ffffff;

  /* Teal — action, selection, links */
  --teal-700: #0b5049;  /* link hover */
  --teal-600: #0f6b60;  /* links, selected text, avatar */
  --teal-550: #0d7a70;  /* primary hover */
  --teal-500: #0f8a7e;  /* primary button, active */
  --teal-300: #28c4a8;  /* accent on dark surfaces */
  --teal-200: #8fcfc4;  /* chart secondary */
  --teal-100: #e3f1ee;  /* selected bg, ghost hover */
  --teal-50:  #f4faf9;  /* AI/reasoning surface */
  --focus-ring: 0 0 0 3px #d7ede9;

  /* Semantic */
  --danger-700: #8f3522; --danger-600: #b4472f; --danger-100: #f8e8e3; --danger-border: #ecc7bc; --danger-row: #fdf6f4;
  --warning-700: #a06c12; --warning-500: #c98a1a; --warning-100: #faf1e0; --warning-border: #ecd9ac;
  --info-600: #3f4a6b; --info-100: #eceef5; --info-border: #cfd4e6;
  --success-600: #2e7d4f; --success-100: #e6f2ea; --success-border: #bfdcc9;

  /* Brand — logo only, never for UI state */
  --brand-red: #e2231a;

  /* Data viz (in order) */
  --viz-1: #0f8a7e; --viz-2: #d3a13a; --viz-3: #3f4a6b; --viz-4: #8fcfc4; --viz-5: #c3c9cf; --viz-risk: #b4472f;

  /* Type */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --text-caption: 11px;   /* uppercase labels, tags (600, +.05em) */
  --text-meta: 12px;      /* table cells, meta */
  --text-body: 13px;      /* default UI text */
  --text-body-lg: 14px;   /* chat, large buttons */
  --text-section: 16px;   /* card / section title (600) */
  --text-page: 20px;      /* page title (700, -.01em) */
  --text-kpi: 28px;       /* KPI values (700) */

  /* Space (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;

  /* Radius */
  --radius-xs: 4px;   /* tags, flags */
  --radius-sm: 6px;   /* inputs, sm buttons */
  --radius-md: 8px;   /* buttons */
  --radius-lg: 10px;  /* cards, tables */
  --radius-xl: 14px;  /* modals, chat panel */
  --radius-pill: 999px;

  /* Elevation — cards use border only */
  --shadow-popover: 0 8px 24px rgba(18,22,26,.12), 0 0 0 1px rgba(18,22,26,.06);
  --shadow-drawer: -8px 0 30px rgba(0,0,0,.16);
  --shadow-modal: 0 24px 60px rgba(0,0,0,.28);
  --overlay: rgba(20,24,28,.36);

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-panel: 220ms;

  /* Layout */
  --sidebar-w: 232px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --content-max: 1440px;
}