@import "tailwindcss";
@import "@openstatus/ui/globals";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";

/* safelist */
@source inline("has-data-[slot=slider-range]:bg-red-500");

@theme {
  --breakpoint-xs: 30rem;

  /* Heights of the sticky app chrome. Pages that fill the viewport instead of
   * growing the document (monitor logs) subtract both. */
  --spacing-app-header: 3.5rem;
  --spacing-app-tabs: 41px;
}

@theme inline {
  --font-cal: var(--font-cal-sans);
  --font-commit-mono: var(--font-commit-mono);
  --font-sans: var(--font-inter);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--destructive);
  --color-info: var(--info);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  /* Scoped to the onboarding status-page preview so `rounded-full` collapses
   * to 0 when the active theme sets `--radius: 0` (every theme except the
   * Rounded one). Mirrors the global override in
   * `apps/status-page/src/app/globals.css` so the preview matches the real
   * page's rendering. The `* 99999999` dance avoids `infinity * 1px` issues
   * when `--radius` is 0. */
  [data-status-preview] .rounded-full {
    border-radius: calc(var(--radius) * 99999999);
  }
}