@import "tailwindcss";

/* ── Map existing CSS vars into Tailwind theme ──
   This lets you write bg-surface, text-accent, border-border etc.
   Values reference your :root vars, so theme switching (Titan/ERAS) works automatically. */

@theme {
  /* Colors — mapped from :root CSS vars */
  --color-bg:          var(--bg);
  --color-bg-dim:      var(--bg-dim);
  --color-surface:     var(--surface);
  --color-border:      var(--border);
  --color-chat-bg:     var(--chat-bg);
  --color-agent:       var(--agent);
  --color-agent-border:var(--agent-border);
  --color-muted:       var(--muted);
  --color-muted-text:  var(--muted-text);

  --color-text:        var(--text);
  --color-text-dim:    var(--text-dim);

  --color-accent:      var(--accent);
  --color-user-bubble: var(--user-bubble);
  --color-primary:     var(--primary);
  --color-secondary:   var(--secondary);
  --color-success:     var(--success);
  --color-success-dim: var(--success-dim);
  --color-warn:        var(--warn);
  --color-error:       var(--error);
  --color-focus:       var(--focus);

  /* Typography */
  --font-sans:         var(--font-sans);
  --font-mono:         var(--font-mono);

  /* Spacing tokens */
  --spacing-page:      var(--space-page);
  --spacing-gap:       var(--space-gap);
  --spacing-inset:     var(--space-inset);

  /* Border radius */
  --radius-lg:         var(--radius);
  --radius-sm:         var(--radius-sm);
}

/* ── Component classes ──
   Reusable semantic classes built from Tailwind utilities.
   Use these in templates for common patterns. */

@utility card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-inset);
}

@utility badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  white-space: nowrap;
}

@utility btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}

@utility btn-primary {
  background-color: var(--accent);
  color: white;
  border: none;
}

@utility btn-outline {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
}

@utility btn-danger {
  background: none;
  border: 1px solid var(--error);
  color: var(--error);
}