/* Tracelyx — Design tokens */
:root {
  /* Surfaces */
  --bg-0: #07090a;
  --bg-1: #0b0e10;
  --bg-2: #11151a;
  --bg-3: #161b22;
  --line: #1f2730;
  --line-strong: #2a3340;

  /* Text */
  --fg-0: #e7eef5;
  --fg-1: #b8c2cc;
  --fg-2: #8a96a3;
  --fg-3: #5b6571;

  /* Brand accent (neon mint/cyan blend) — overridable via Tweaks */
  --accent: #00ffa3;
  --accent-dim: #00cc83;
  --accent-glow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent),
                 0 0 24px -4px color-mix(in oklab, var(--accent) 60%, transparent);

  /* Span kind colors (echo of dashboard) */
  --kind-llm: #4ea1ff;
  --kind-tool: #ff9b3a;
  --kind-hook: #b388ff;
  --kind-agent: #00ffa3;

  /* Status */
  --status-ok: #00d889;
  --status-err: #ff5b6e;

  /* Type */
  --font-mono: "JetBrains Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;

  /* Geometry */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --container: 1200px;
  --container-narrow: 960px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Light theme override */
:root[data-theme="light"] {
  --bg-0: #fafaf7;
  --bg-1: #ffffff;
  --bg-2: #f3f4f1;
  --bg-3: #e9ebe6;
  --line: #e1e3dd;
  --line-strong: #c8ccc4;
  --fg-0: #0a0d10;
  --fg-1: #2a3038;
  --fg-2: #5b6571;
  --fg-3: #8a96a3;
  --accent: #0a8f5e;
  --accent-dim: #066a44;
  --accent-glow: 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent),
                 0 0 18px -6px color-mix(in oklab, var(--accent) 35%, transparent);
}