/* Self-hosted via @fontsource-variable/inter — no render-blocking Google Fonts request */
@import "@fontsource-variable/inter";

@import "tailwindcss";
@import "@agent-native/core/styles/agent-native.css";
@import "@agent-native/toolkit/styles.css";

@source "./**/*.{ts,tsx}";

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 0 0% 15%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 95%;
  --secondary-foreground: 0 0% 15%;
  --muted: 0 0% 95%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 95%;
  --accent-foreground: 0 0% 15%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 40%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 97%;
  --sidebar-foreground: 0 0% 45%;
  --sidebar-primary: 0 0% 15%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 95%;
  --sidebar-accent-foreground: 0 0% 15%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 40%;
  --design-editor-accent-color: hsl(205 100% 53%);
  --design-editor-accent-hover-color: hsl(205 81% 42%);
  --design-editor-selection-color: color-mix(
    in srgb,
    hsl(205 100% 53%) 14%,
    transparent
  );
  --design-editor-component-color: hsl(263 84% 64%);
  --design-editor-component-hover-color: hsl(263 72% 56%);
  --design-editor-component-selection-color: color-mix(
    in srgb,
    hsl(263 84% 64%) 16%,
    transparent
  );
  --design-editor-component-selected-subtree-color: color-mix(
    in srgb,
    hsl(263 84% 64%) 10%,
    transparent
  );
  --design-editor-component-strong-color: var(--design-editor-component-color);
  --design-editor-component-contrast-color: #ffffff;
  --design-editor-active-row-color: color-mix(
    in srgb,
    hsl(0 0% 15%) 8%,
    transparent
  );
  --design-editor-layer-hover-color: color-mix(
    in srgb,
    hsl(0 0% 15%) 6%,
    transparent
  );
  --design-editor-selected-subtree-color: color-mix(
    in srgb,
    hsl(205 100% 53%) 9%,
    transparent
  );
  --design-editor-panel-divider-color: color-mix(
    in srgb,
    hsl(var(--border)) 76%,
    transparent
  );
  --design-editor-accent-strong-color: var(--design-editor-accent-color);
  --design-editor-accent-contrast-color: #ffffff;
  --design-editor-measure-color: hsl(24 95% 53%);
  --design-editor-panel-bg: hsl(var(--background));
  --design-editor-panel-raised-bg: hsl(var(--secondary));
  --design-editor-control-bg: hsl(var(--muted));
  --design-editor-control-border: hsl(var(--border));
  --design-editor-question-option-bg: color-mix(
    in srgb,
    var(--design-editor-control-bg) 58%,
    transparent
  );
  --design-editor-canvas-bg: hsl(0 0% 92%);
  --design-editor-skeleton-canvas-bg: hsl(0 0% 92%);
  --design-editor-skeleton-panel-ghost-bg: color-mix(
    in srgb,
    hsl(var(--foreground)) 6%,
    transparent
  );
}

.dark {
  --background: 0 0% 13%;
  --foreground: 0 0% 90%;
  --card: 0 0% 15%;
  --card-foreground: 0 0% 90%;
  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 90%;
  --primary: 0 0% 75%;
  --primary-foreground: 0 0% 10%;
  --secondary: 0 0% 18%;
  --secondary-foreground: 0 0% 90%;
  --muted: 0 0% 16%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 18%;
  --accent-foreground: 0 0% 96%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 24%;
  --input: 0 0% 24%;
  --ring: 0 0% 60%;
  --radius: 0.5rem;
  --sidebar-background: 0 0% 10%;
  --sidebar-foreground: 0 0% 60%;
  --sidebar-primary: 0 0% 75%;
  --sidebar-primary-foreground: 0 0% 10%;
  --sidebar-accent: 0 0% 16%;
  --sidebar-accent-foreground: 0 0% 90%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 0 0% 60%;
  --design-editor-accent-color: hsl(205 100% 53%);
  --design-editor-accent-hover-color: hsl(205 81% 42%);
  --design-editor-selection-color: color-mix(
    in srgb,
    hsl(205 100% 53%) 24%,
    transparent
  );
  --design-editor-component-color: hsl(263 88% 74%);
  --design-editor-component-hover-color: hsl(263 82% 68%);
  --design-editor-component-selection-color: color-mix(
    in srgb,
    hsl(263 88% 74%) 28%,
    transparent
  );
  --design-editor-component-selected-subtree-color: color-mix(
    in srgb,
    hsl(263 88% 74%) 18%,
    transparent
  );
  --design-editor-component-strong-color: var(--design-editor-component-color);
  --design-editor-component-contrast-color: #ffffff;
  --design-editor-active-row-color: hsl(0 0% 20%);
  --design-editor-layer-hover-color: color-mix(
    in srgb,
    hsl(0 0% 100%) 8%,
    transparent
  );
  --design-editor-selected-subtree-color: color-mix(
    in srgb,
    hsl(205 100% 53%) 18%,
    transparent
  );
  --design-editor-panel-divider-color: hsl(0 0% 22%);
  --design-editor-accent-strong-color: var(--design-editor-accent-color);
  --design-editor-accent-contrast-color: #ffffff;
  --design-editor-measure-color: hsl(24 95% 53%);
  --design-editor-panel-bg: hsl(0 0% 13%);
  --design-editor-panel-raised-bg: hsl(0 0% 18%);
  --design-editor-control-bg: hsl(0 0% 18%);
  --design-editor-control-border: hsl(0 0% 24%);
  --design-editor-question-option-bg: color-mix(
    in srgb,
    var(--design-editor-control-bg) 58%,
    transparent
  );
  --design-editor-canvas-bg: hsl(0 0% 10%);
  --design-editor-skeleton-canvas-bg: hsl(0 0% 11%);
}

@layer base {
  body {
    @apply bg-background text-foreground;
    font-family: "Inter Variable", "Inter", sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}

.design-inspector-scroll {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}

.design-inspector-scroll::-webkit-scrollbar {
  width: 5px;
}

.design-inspector-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.design-inspector-scroll::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}

.design-inspector-scroll::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}

.design-editor-not-found-grid {
  background-image:
    linear-gradient(
      var(--design-editor-panel-divider-color) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--design-editor-panel-divider-color) 1px,
      transparent 1px
    );
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 0,
    black 34%,
    transparent 72%
  );
  mask-image: radial-gradient(
    circle at center,
    black 0,
    black 34%,
    transparent 72%
  );
}

/* Design keeps denser side-chrome contrast while sharing the borderless app
   surface treatment used by the rest of the workspace. */
.agent-layout-shell,
.agent-sidebar-shell {
  --design-shell-chrome-bg: hsl(0 0% 93%);
  --agent-native-lower-surface: var(--design-shell-chrome-bg);
}

.dark .agent-layout-shell,
.dark .agent-sidebar-shell,
.dark.agent-layout-shell,
.dark.agent-sidebar-shell {
  --design-shell-chrome-bg: hsl(0 0% 10%);
  --agent-native-lower-surface: var(--design-shell-chrome-bg);
}

.agent-sidebar-panel[data-agent-sidebar-layout="desktop"],
.agent-sidebar-panel[data-agent-sidebar-layout="mobile"],
.agent-sidebar-panel > .agent-sidebar-panel-inner {
  background: var(--design-shell-chrome-bg);
}

.design-editor-app-menu-content {
  border: 1.5px solid var(--design-editor-control-border);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.12);
  animation: none !important;
}

.design-editor-app-menu-content[data-state="open"],
.design-editor-app-menu-content[data-state="closed"] {
  animation: none !important;
}

.design-motion-dock-space {
  --design-motion-dock-duration: 200ms;
  --design-motion-dock-easing: ease-out;
  transition: height var(--design-motion-dock-duration)
    var(--design-motion-dock-easing);
}

.design-motion-dock {
  transition:
    border-color var(--design-motion-dock-duration)
      var(--design-motion-dock-easing),
    transform var(--design-motion-dock-duration)
      var(--design-motion-dock-easing);
}

.design-motion-dock-space.design-motion-dock-resizing .design-motion-dock {
  transition-duration: 0ms;
}

.design-motion-dock-space.design-motion-dock-resizing {
  transition-duration: 0ms;
}

.dark .design-editor-app-menu-content {
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.34);
}