@import "tailwindcss";

/* Spectrum-style tokens. Every colour in a component is one of these; dark mode
   redefines them. Blue = action; green / orange / red = status; violet = what
   the AI read (never used for anything a person decided). */
:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --border: #e1e1e1;
  --border-strong: #cacaca;
  --text: #2c2c2c;
  --muted: #6e6e6e;
  --accent: #1473e6;
  --accent-hover: #0d66d0;
  --accent-soft: #e5f0fd;
  --positive: #268e6c;
  --positive-soft: #e3f5ee;
  --notice: #cb6f10;
  --notice-soft: #fdf0e2;
  --negative: #d7373f;
  --negative-soft: #fbe8e9;
  --ai: #7e4ccb;
  --ai-soft: #f1eafb;
  --bubble-in: #ffffff;
  --bubble-out: #e5f0fd;
  --topbar: #ffffff;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}
:root[data-theme="dark"] {
  --bg: #1d1d1d;
  --surface: #2c2c2c;
  --surface-2: #323232;
  --border: #3e3e3e;
  --border-strong: #555555;
  --text: #e8e8e8;
  --muted: #a3a3a3;
  --accent: #4b9cf5;
  --accent-hover: #6aaef7;
  --accent-soft: #1d3554;
  --positive: #3db58f;
  --positive-soft: #1b3a30;
  --notice: #f29423;
  --notice-soft: #43301a;
  --negative: #f0565d;
  --negative-soft: #4a2427;
  --ai: #a77ef0;
  --ai-soft: #352a4a;
  --bubble-in: #383838;
  --bubble-out: #1d3554;
  --topbar: #252525;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}

@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-line: var(--border);
  --color-line-strong: var(--border-strong);
  --color-ink: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-soft: var(--accent-soft);
  --color-positive: var(--positive);
  --color-positive-soft: var(--positive-soft);
  --color-notice: var(--notice);
  --color-notice-soft: var(--notice-soft);
  --color-negative: var(--negative);
  --color-negative-soft: var(--negative-soft);
  --color-ai: var(--ai);
  --color-ai-soft: var(--ai-soft);
  --color-bubble-in: var(--bubble-in);
  --color-bubble-out: var(--bubble-out);
  --color-topbar: var(--topbar);
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--font-sans); font-size: 15px; -webkit-font-smoothing: antialiased; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.field-input {
  width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 4px; padding: 6px 10px; font-size: 14px; outline: none;
}
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 16px; padding: 5px 16px; font-weight: 600; font-size: 14px; border: 2px solid transparent; cursor: pointer; transition: background .12s; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-cta { background: var(--accent); color: #fff; }
.btn-cta:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
.btn-negative { background: transparent; color: var(--negative); border-color: var(--negative); }
.btn-negative:hover:not(:disabled) { background: var(--negative-soft); }