@import "tailwindcss";

/*
 * Plugin theming via hub-supplied CSS variables.
 *
 * The plugin's onHello (lib/bridge.svelte.ts) re-namespaces every hub token
 * under `--hub-*` so we can chain through `@theme` without the CSS variable
 * self-reference cycle that Tailwind v4 emits when the input + output names
 * collide. See memory: reference_plugin_theme_indirection_namespace.
 *
 * Token map (hub → plugin):
 *   --hub-color-bg               -> background / page
 *   --hub-color-bg2              -> raised surface (cards, panels)
 *   --hub-color-bg3              -> double-raised (modal inputs, hover)
 *   --hub-color-foreground       -> primary text
 *   --hub-color-muted-foreground -> secondary text
 *   --hub-color-muted            -> tertiary text
 *   --hub-color-border           -> borders / dividers
 *   --hub-color-accent           -> primary action (Save, +Add)
 *   --hub-color-accent-foreground-> text on accent
 *
 * Fallbacks are reasonable dark-theme defaults so the plugin still renders
 * standalone (outside a minion hub).
 */
@theme {
  /* Plugin's semantic palette, fed from hub. */
  --color-bg: var(--hub-color-bg, hsl(240 6% 6%));
  --color-surface: var(--hub-color-bg2, hsl(240 5% 10%));
  --color-surface-2: var(--hub-color-bg3, hsl(240 5% 14%));
  --color-border: var(--hub-color-border, hsl(240 4% 22%));
  --color-border-strong: var(--hub-color-border, hsl(240 4% 32%));
  --color-fg: var(--hub-color-foreground, hsl(0 0% 96%));
  --color-fg-muted: var(--hub-color-muted-foreground, hsl(240 5% 65%));
  --color-fg-subtle: var(--hub-color-muted, hsl(240 5% 50%));
  --color-primary: var(--hub-color-accent, hsl(217 91% 60%));
  --color-primary-fg: var(--hub-color-accent-foreground, hsl(0 0% 100%));
  --color-danger: hsl(0 84% 60%);
  --color-warn: hsl(38 92% 50%);
  --color-success: hsl(142 71% 45%);
}

html,
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
}

.tabular {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
