/* Tailwind v4 WITHOUT Preflight — theme + utilities only.
 *
 * We deliberately skip Tailwind's global reset (preflight) so the app's mature
 * hand-written CSS in App.css is left completely untouched: no stripping of
 * markdown list bullets, heading margins, form-control styling, etc. shadcn/ui
 * components still work because they style themselves with utility classes and
 * the design tokens below.
 *
 * The tokens map shadcn's colour names onto the app's OWN theme variables
 * (App.css). We map through Tailwind's `--color-*` namespace via `@theme inline`
 * and never redefine `--accent` / `--muted` themselves — those names already
 * belong to App.css and reusing them would repaint the whole app. Because the
 * mappings point at the app's vars, shadcn components flip automatically under
 * :root[data-theme="dark"]; no separate dark block is needed.
 *
 * `source(".")` scans src/ for class names instead of the whole checkout.
 * Tailwind's default skips only gitignored paths, so it also read untracked
 * scratch trees (an agent's TMPDIR, caches or a copied cargo registry under
 * the worktree): a 65,000-file one more than quadrupled the build and the dev
 * server's first load and put utilities for random tokens into the app's CSS.
 * Every class the app uses is in src/; the rest of the repository only
 * contributed the Open Slide runtime's own classes (tools/open-slide-runtime),
 * which style a separate page. */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) source(".");

/* The app toggles dark mode with :root[data-theme="dark"] (not Tailwind's
   default `.dark` class), so point the `dark:` variant at that selector —
   otherwise every shadcn `dark:` utility silently no-ops. */
@custom-variant dark (&:is([data-theme="dark"], [data-theme="dark"] *));

:root {
  --radius: 8px;
}

@theme inline {
  --font-sans: var(--ui-font);
  --font-mono: var(--editor-font);

  --color-background: var(--bg);
  --color-foreground: var(--text);
  --color-card: var(--panel-strong);
  --color-card-foreground: var(--text);
  --color-popover: var(--panel-strong);
  --color-popover-foreground: var(--text);
  --color-primary: var(--control-active);
  --color-primary-foreground: var(--accent-contrast);
  --color-secondary: var(--panel);
  --color-secondary-foreground: var(--text);
  --color-muted: var(--panel);
  --color-muted-foreground: var(--muted);
  --color-accent: var(--accent-soft);
  --color-accent-foreground: var(--accent);
  --color-destructive: var(--danger);
  --color-destructive-foreground: #ffffff;
  --color-border: var(--line-strong);
  --color-input: var(--line-strong);
  --color-ring: var(--control-active);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  /* Fluid Functionalism's interaction fills follow the app's light/dark theme. */
  --color-hover: var(--control-hover-surface);
  --color-active: var(--control-pressed-surface);
}

@layer base {
  /* shadcn components use a bare `border` utility for their 1px edges; give it a
     sensible colour. Harmless to the existing app: this only sets border-COLOR
     (never a width), it lives in @layer base (which every unlayered App.css rule
     outranks), and App.css always uses the full `border:` shorthand anyway. */
  *,
  ::before,
  ::after {
    border-color: var(--line-strong);
  }
}