@import "tailwindcss";
@import "tw-animate-css";
@import "./style.css" layer(components);
@import "./style-indicators.css" layer(components);
@import "./gradients.css" layer(components);

/* Preview classes — extracted from rendered component previews by
   extract_preview_classes.py during `prefab dev build-docs`. The main
   renderer uses @tailwindcss/browser for runtime CSS generation and
   does not depend on this source. */
@source "../../tools/preview-classes.html";

@custom-variant dark (&:is(.dark *));

/* Custom data-attribute variants (from shadcn/tailwind.css) */
@custom-variant data-open {
  &:where([data-state="open"]),
  &:where([data-open]:not([data-open="false"])) {
    @slot;
  }
}
@custom-variant data-closed {
  &:where([data-state="closed"]),
  &:where([data-closed]:not([data-closed="false"])) {
    @slot;
  }
}
@custom-variant data-checked {
  &:where([data-state="checked"]),
  &:where([data-checked]:not([data-checked="false"])) {
    @slot;
  }
}
@custom-variant data-unchecked {
  &:where([data-state="unchecked"]),
  &:where([data-unchecked]:not([data-unchecked="false"])) {
    @slot;
  }
}
@custom-variant data-selected {
  &:where([data-selected="true"]) {
    @slot;
  }
}
@custom-variant data-disabled {
  &:where([data-disabled="true"]),
  &:where([data-disabled]:not([data-disabled="false"])) {
    @slot;
  }
}
@custom-variant data-active {
  &:where([data-state="active"]),
  &:where([data-active]:not([data-active="false"])) {
    @slot;
  }
}
@custom-variant data-horizontal {
  &:where([data-orientation="horizontal"]) {
    @slot;
  }
}
@custom-variant data-vertical {
  &:where([data-orientation="vertical"]) {
    @slot;
  }
}

@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--accordion-panel-height);
  }
}
@keyframes accordion-up {
  from {
    height: var(--accordion-panel-height);
  }
  to {
    height: 0;
  }
}

@theme inline {
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --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);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@import "./theme.css";

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html,
  body,
  #root {
    width: 100%;
    min-width: 100vw;
    min-height: 20rem;
  }
  body {
    @apply bg-background text-foreground;
    margin: 0;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    font-family: var(
      --font-sans,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif
    );
  }
}

/* highlight.js token colors — tuned for shadcn light/dark themes */
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-literal {
  color: oklch(0.55 0.2 270);
}
.hljs-string,
.hljs-doctag,
.hljs-template-variable {
  color: oklch(0.55 0.18 150);
}
.hljs-number,
.hljs-regexp {
  color: oklch(0.6 0.2 40);
}
.hljs-title,
.hljs-title\.class_,
.hljs-title\.function_ {
  color: oklch(0.55 0.15 260);
}
.hljs-comment {
  color: oklch(0.55 0 0);
  font-style: italic;
}
.hljs-variable,
.hljs-template-variable {
  color: oklch(0.6 0.18 30);
}
.hljs-attr,
.hljs-attribute {
  color: oklch(0.6 0.15 200);
}
.hljs-meta,
.hljs-selector-class {
  color: oklch(0.55 0.12 290);
}
.hljs-type,
.hljs-params {
  color: oklch(0.55 0.15 200);
}
.hljs-punctuation {
  color: oklch(0.5 0 0);
}

.dark .hljs-keyword,
.dark .hljs-selector-tag,
.dark .hljs-built_in,
.dark .hljs-literal {
  color: oklch(0.75 0.18 270);
}
.dark .hljs-string,
.dark .hljs-doctag,
.dark .hljs-template-variable {
  color: oklch(0.72 0.16 150);
}
.dark .hljs-number,
.dark .hljs-regexp {
  color: oklch(0.75 0.18 40);
}
.dark .hljs-title,
.dark .hljs-title\.class_,
.dark .hljs-title\.function_ {
  color: oklch(0.75 0.13 260);
}
.dark .hljs-comment {
  color: oklch(0.55 0 0);
  font-style: italic;
}
.dark .hljs-variable,
.dark .hljs-template-variable {
  color: oklch(0.75 0.16 30);
}
.dark .hljs-attr,
.dark .hljs-attribute {
  color: oklch(0.72 0.13 200);
}
.dark .hljs-meta,
.dark .hljs-selector-class {
  color: oklch(0.7 0.1 290);
}
.dark .hljs-type,
.dark .hljs-params {
  color: oklch(0.72 0.13 200);
}
.dark .hljs-punctuation {
  color: oklch(0.65 0 0);
}
