/*
 * tokens.css — Brand design tokens.
 *
 * Placeholder values until Claude Design produces the brand guide. Tailwind
 * via CDN handles most styling for now; this file gives templates a single
 * source-of-truth for any custom CSS variables (e.g. brand-specific colors
 * not in the Tailwind palette).
 *
 * Once the Claude Design brand guide lands, this file gets regenerated with
 * the agreed tokens (palette, typography scale, spacing scale, radii) so
 * every template inherits the new look automatically.
 */

:root {
  /* Brand palette — placeholders */
  --brand-primary: #1a1a1a;
  --brand-primary-hover: #404040;
  --brand-bg: #fafafa;
  --brand-text: #1a1a1a;
  --brand-text-muted: #6b7280;
  --brand-accent: #f59e0b;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
}