/* pi-provider-trace — dual theme (Factory-inspired) */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap");

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101010;
  --chrome: #161616;
  --surface: #1d1a18;
  --surface-hover: #252220;
  --border: #3d3a39;
  --border-subtle: #2a2826;
  --text: #eeeeee;
  --text-secondary: #b8b3b0;
  --text-muted: #8a8380;
  --accent-live: #ee6018;
  --accent-ok: #7cb868;
  --accent-err: #e85d4a;
  /* Dark: cards match surface stack, not light bone slabs */
  --card-bg: #1c1c1c;
  --card-fg: #eeeeee;
  --card-muted: #b8b3b0;
  --card-border: #3d3a39;
  --table-row-border: #2a2826;
  --table-head-border: #3d3a39;
  --btn-bg: #2a2826;
  --btn-fg: #eeeeee;
  --btn-border: #3d3a39;
  --input-bg: #1d1a18;
  --input-fg: #eeeeee;
  --input-border: #3d3a39;
  --code-bg: #161616;
  --code-fg: #e8e4e0;
  --pill-on-bg: rgba(124, 184, 104, 0.12);
  --pill-on-border: rgba(124, 184, 104, 0.45);
  --pill-on-fg: #a0ca92;
  --tl-dot-hook: var(--accent-live);
  --tl-dot-http: #eeeeee;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --motion: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --bg: var(--canvas);
  --panel: var(--surface);
  --elevated: var(--surface-hover);
  --muted: var(--text-muted);
  --dim: var(--text-secondary);
  --green: var(--accent-ok);
  --amber: var(--accent-live);
  --red: var(--accent-err);
  --panel-bone-bg: var(--card-bg);
  --panel-bone-text: var(--card-fg);
  --btn-fill: var(--btn-bg);
  --btn-text: var(--btn-fg);
  --radius-btn: var(--radius-sm);
  --radius-card: var(--radius-lg);
}

[data-theme="light"] {
  color-scheme: light;
  --canvas: #e8e6e3;
  --chrome: #f5f4f2;
  --surface: #ffffff;
  --surface-hover: #f0eeeb;
  --border: #d8d4cf;
  --border-subtle: #ebe8e4;
  --text: #1a1816;
  --text-secondary: #5c5652;
  --text-muted: #7a746f;
  --accent-live: #c44f10;
  --accent-ok: #3d7a32;
  --accent-err: #c43d2e;
  --card-bg: #ffffff;
  --card-fg: #1a1816;
  --card-muted: #6b6562;
  --card-border: #d8d4cf;
  --table-row-border: #ebe8e4;
  --table-head-border: #d8d4cf;
  --btn-bg: #1a1816;
  --btn-fg: #f5f4f2;
  --btn-border: #1a1816;
  --input-bg: #ffffff;
  --input-fg: #1a1816;
  --input-border: #d8d4cf;
  --code-bg: #f0eeeb;
  --code-fg: #1a1816;
  --pill-on-bg: rgba(61, 122, 50, 0.1);
  --pill-on-border: rgba(61, 122, 50, 0.35);
  --pill-on-fg: #3d7a32;
  --tl-dot-hook: var(--accent-live);
  --tl-dot-http: #1a1816;
  --panel-bone-bg: var(--card-bg);
  --panel-bone-text: var(--card-fg);
  --btn-fill: var(--btn-bg);
  --btn-text: var(--btn-fg);
}

html,
body {
  background: var(--canvas);
  color: var(--text);
}