/*
 * @colineapp/ui theme: the Tailwind names for Coline's design tokens
 * (`bg-card`, `text-muted-foreground`, `border-border`, `rounded-xl`, the
 * `dark:` variant). The token values come from `@colineapp/ui/styles.css`.
 * A site imports both:
 *
 *   @import "tailwindcss";
 *   @import "@colineapp/ui/theme.css";
 */

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  /* Status and data colors: the same semantic tokens as Coline itself. */
  --color-positive: var(--status-positive);
  --color-positive-fg: var(--status-positive-fg);
  --color-attention: var(--status-attention);
  --color-attention-fg: var(--status-attention-fg);
  --color-risk: var(--status-risk);
  --color-risk-fg: var(--status-risk-fg);
  --color-action: var(--action);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}