/**
 * shadcn-compat.css
 * @countermeasure-platform/web-components
 *
 * Shadcn / Tailwind v4 token bridge.
 *
 * Apps built on shadcn-style Tailwind v4 expect a fixed set of CSS custom
 * properties (`--color-primary`, `--color-card`, `--color-foreground`,
 * `--color-muted-foreground`, `--color-border`, `--color-destructive`,
 * `--color-accent`). The library's primitives historically read from the
 * CounterMeasure token set in `tokens.css` (e.g. `--primary`, `--card`,
 * `--foreground`). Loading this file maps the library tokens onto the
 * shadcn token names, so `tone="shadcn"` primitives match the host app's
 * palette without forcing the consumer to redefine colors.
 *
 * Usage:
 *
 *   import "@countermeasure-platform/web-components/styles/shadcn-compat.css"
 *
 * Place after `tokens.css` (or after your shadcn theme stylesheet — the
 * `@layer base` ensures host-app overrides still win).
 *
 * The mapping uses HSL channel triplets so it composes cleanly with
 * Tailwind v4's `oklch(var(--color-x) / <alpha-value>)` and shadcn's
 * `hsl(var(--color-x) / <alpha-value>)` patterns.
 */

@layer base {
  :root,
  .dark,
  [data-theme="dark"],
  .monokai,
  [data-theme="monokai"],
  .glass,
  [data-theme="glass"] {
    /* Surface */
    --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);

    /* Brand */
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    /* Muted / accent */
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    /* Status */
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-success: var(--success);
    --color-success-foreground: var(--success-foreground);
    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);
    --color-info: var(--info);
    --color-info-foreground: var(--info-foreground);

    /* Borders / focus */
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
  }
}
