/*
 * theme.css — Lead Management design tokens. Warm neutral ground, one vermilion accent.
 * Dense and quick like Linear, with the warmth of an agency tool.
 */

:root {
  --canvas: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f3efe9;
  --border: #e5dfd6;
  --border-strong: #b9b0a3;
  --ink: #1d1a17;
  --muted: #6b645b;
  --accent: #c2410c;
  --accent-hover: #a8370a;
  --accent-ink: #ffffff;
  --accent-text: #b13a09;
  --accent-strong: #8a2e08;
  --accent-soft: #fdeadd;
  --accent-border: #f0b794;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dff0e5;
  --success-strong: #136b34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f8e9d4;
  --warning-strong: #8f4108;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f6e0df;
  --danger-strong: #a01a1a;
  --chart-1: #c2410c;
  --chart-2: #0f766e;
  --chart-3: #6d28d9;
  --chart-4: #a16207;
  --chart-5: #1d4ed8;
  --chart-6: #6b645b;

  --font-display: "Bricolage Grotesque", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-input: 8px;
}

html[data-theme="dark"] {
  --canvas: #161412;
  --surface: #1f1c19;
  --surface-2: #2a2622;
  --border: #36312b;
  --border-strong: #5c554c;
  --ink: #f5f1ea;
  --muted: #a69d91;
  --accent: #fb923c;
  --accent-hover: #fdab68;
  --accent-ink: #1a1008;
  --accent-text: #fdba74;
  --accent-strong: #fdc796;
  --accent-soft: #3a2616;
  --accent-border: #6b4527;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #16301f;
  --success-strong: #6fbf8a;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2a14;
  --warning-strong: #e0a25f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b1a1a;
  --danger-strong: #e08585;
  --chart-1: #fb923c;
  --chart-2: #2dd4bf;
  --chart-3: #a78bfa;
  --chart-4: #facc15;
  --chart-5: #60a5fa;
  --chart-6: #a69d91;
}

/* app.css — what no primitive covers. Tokens only. */

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
}

/* Status picker: the select itself carries the status colour. */
.status-select {
  font-weight: 500;
  background-color: var(--surface-2);
  color: var(--ink);
}
.status-select[data-status="New"] { background-color: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); }
.status-select[data-status="Contacted"] { background-color: var(--surface-2); color: var(--ink); }
.status-select[data-status="Qualified"] { background-color: var(--warning-soft); color: var(--warning-strong); }
.status-select[data-status="Proposal Sent"] { background-color: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.status-select[data-status="Won"] { background-color: var(--success-soft); color: var(--success-strong); }
.status-select[data-status="Lost"] { background-color: var(--danger-soft); color: var(--danger-strong); }

/* The one moment that moves: a refreshed row settles in from a small offset. Rests visible. */
@keyframes lead-settle {
  from { transform: translateY(4px); }
  to { transform: translateY(0); }
}
.lead-row { animation: lead-settle 0.22s ease-out both; }
.lead-row:hover { background: var(--surface-2); }
html.reduced-motion .lead-row { animation: none; }