@import "tailwindcss";
@plugin "@tailwindcss/typography";
@import "./tokens.css";
@import "./marketing.css";

/* `inline` keeps the var() reference in generated utilities, so they switch
   with [data-theme] at runtime instead of being resolved at build time. */
@theme inline {
  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-muted);
  --color-surface-raised: var(--surface-raised);
  --color-default: var(--text);
  --color-muted: var(--text-muted);
  --color-subtle: var(--text-subtle);
  --color-border-default: var(--border);
  --color-border-strong: var(--border-strong);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-contrast: var(--accent-contrast);
  --color-accent-subtle: var(--accent-subtle);
  --color-success: var(--success);
  --color-success-subtle: var(--success-subtle);
  --color-warning: var(--warning);
  --color-warning-subtle: var(--warning-subtle);
  --color-danger: var(--danger);
  --color-danger-subtle: var(--danger-subtle);
  --color-info: var(--info);
  --color-info-subtle: var(--info-subtle);
  --color-ring: var(--ring);
  --shadow-card: var(--shadow-card);
  --shadow-pop: var(--shadow-pop);
}