/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.5.25_@playwright+test@1.62.1_@types+node@22.20.1_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.25_@playwright+test@1.62.1_@types+node@22.20.1_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/ide.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Design tokens for the IDE chrome (the `/ide` app), following shadcn/ui's HSL
 * variable convention. Everything is SCOPED to `.ide-root` so it never leaks into
 * the generated marketing site or /studio, which define their own `--background`,
 * `--accent`, `--border` etc. as plain hex on `:root`. The Tailwind color utilities
 * (bg-background, text-muted-foreground, …) map to these variables, so they only
 * render meaningfully inside `.ide-root`.
 *
 * The `@tailwind` layers themselves are emitted once, globally, from
 * src/styles/globals.css (imported by the root layout) — we must not repeat them
 * here or the utilities would be generated twice.
 */
.ide-root {
  --background: 0 0% 100%;
  --foreground: 222.2 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47% 11%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.65rem;

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  /* NOTE: no min-height here. `.ide-root` is also applied to portaled Dialog content
   * (to bring in these tokens); a min-height would force every modal to full viewport
   * height. The app shell sets its own height via the `min-h-screen` class. */
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.ide-root *,
.ide-root *::before,
.ide-root *::after {
  border-color: hsl(var(--border));
}

/* The component preview (src/app/preview/component) embeds a site root inside the
   IDE chrome so themed primitives render against their design system. `.site-root`
   claims `min-height: 100vh` for a real page; inside the specimen area it should
   fill the space the chrome leaves instead of forcing a second viewport. */
.specimen-surface > .site-root {
  min-height: 0;
  flex: 1;
}