/* TabHelm design tokens — soft emerald.
   Single source of truth for the extension and the website.
   Edit here, then run `npm run design` (the build copies it too). */

:root {
  /* Surfaces */
  --th-bg: #f3f8f5;
  --th-surface: #ffffff;
  --th-surface-2: #ebf3ef;
  --th-border: #d6e5de;
  --th-border-strong: #b9d3c7;

  /* Text */
  --th-text: #13231c;
  --th-muted: #5d7168;
  --th-faint: #8a9c94;

  /* Emerald accent */
  --th-accent: #2a9d76;
  --th-accent-strong: #1c7d5c;
  --th-accent-text: #ffffff;
  --th-accent-soft: #e0f2e9;
  --th-accent-softer: #f0f8f4;

  /* Messages and code */
  --th-user-bubble: #e2f3ea;
  --th-code-bg: #edf3f0;

  /* Status */
  --th-ok: #2e9b62;
  --th-warn: #b7791f;
  --th-err: #c2452f;
  --th-err-soft: #fbece8;

  /* Shape and depth */
  --th-radius-s: 6px;
  --th-radius-m: 10px;
  --th-radius-l: 14px;
  --th-shadow: 0 1px 2px rgb(19 35 28 / 0.06), 0 4px 16px rgb(19 35 28 / 0.06);
  --th-focus: 0 0 0 3px rgb(42 157 118 / 0.28);

  /* Type */
  --th-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --th-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --th-bg: #0d1512;
    --th-surface: #141f1b;
    --th-surface-2: #1a2823;
    --th-border: #24352e;
    --th-border-strong: #31473e;

    --th-text: #e2f0e9;
    --th-muted: #93aaa0;
    --th-faint: #6d8379;

    --th-accent: #5cc9a1;
    --th-accent-strong: #84dcbb;
    --th-accent-text: #08180f;
    --th-accent-soft: #163329;
    --th-accent-softer: #121f1a;

    --th-user-bubble: #193a2d;
    --th-code-bg: #1b2924;

    --th-ok: #5cc98f;
    --th-warn: #e0a64a;
    --th-err: #ee7a63;
    --th-err-soft: #331b16;

    --th-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
    --th-focus: 0 0 0 3px rgb(92 201 161 / 0.35);

    color-scheme: dark;
  }
}