@import "tailwindcss";
@import "tw-animate-css";
@source "../**/*.{jsx,js,ts}";

@font-face {
  font-family: "Hubot Sans";
  src:
    url("../../../../assets/fonts/HubotSans/Hubot-Sans.woff2") format("woff2 supports variations"),
    url("../../../../assets/fonts/HubotSans/Hubot-Sans.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Mona Sans";
  src:
    url("../../../../assets/fonts/MonaSans/MonaSans.woff2") format("woff2 supports variations"),
    url("../../../../assets/fonts/MonaSans/MonaSans.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

@custom-variant dark (&:where([data-sb-theme^="dark"], [data-sb-theme^="dark"] *));

@theme {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(222.2 84% 4.9%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(222.2 84% 4.9%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(222.2 84% 4.9%);
  --color-primary: hsl(222.2 47.4% 11.2%);
  --color-primary-foreground: hsl(210 40% 98%);
  --color-secondary: hsl(210 40% 96.1%);
  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
  --color-muted: hsl(210 40% 96.1%);
  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
  --color-accent: hsl(210 40% 96.1%);
  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
  --color-destructive: hsl(0 84.2% 60.2%);
  --color-destructive-foreground: hsl(210 40% 98%);
  --color-border: hsl(214.3 31.8% 91.4%);
  --color-input: hsl(214.3 31.8% 91.4%);
  --color-ring: hsl(222.2 84% 4.9%);
  --color-success: hsl(142 71% 36%);
  --color-success-foreground: hsl(0 0% 100%);
  --radius: 0.5rem;
  --font-sans: "Hubot Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --sb--color-background: hsl(0 0% 100%);
  --sb--color-foreground: hsl(222.2 84% 4.9%);
  --sb--color-card: hsl(0 0% 100%);
  --sb--color-card-foreground: hsl(222.2 84% 4.9%);
  --sb--color-popover: hsl(0 0% 100%);
  --sb--color-popover-foreground: hsl(222.2 84% 4.9%);
  --sb--color-primary: hsl(222.2 47.4% 11.2%);
  --sb--color-primary-foreground: hsl(210 40% 98%);
  --sb--color-secondary: hsl(210 40% 96.1%);
  --sb--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
  --sb--color-muted: hsl(210 40% 96.1%);
  --sb--color-muted-foreground: hsl(215.4 16.3% 46.9%);
  --sb--color-accent: hsl(210 40% 96.1%);
  --sb--color-accent-foreground: hsl(222.2 47.4% 11.2%);
  --sb--color-destructive: hsl(0 84.2% 60.2%);
  --sb--color-destructive-foreground: hsl(210 40% 98%);
  --sb--color-border: hsl(214.3 31.8% 91.4%);
  --sb--color-input: hsl(214.3 31.8% 91.4%);
  --sb--color-ring: hsl(222.2 84% 4.9%);
  --sb--color-success: hsl(142 71% 36%);
  --sb--color-success-foreground: hsl(0 0% 100%);
  --sb--radius: var(--radius);
  --sb--font-sans: var(--font-sans);
  --sb--font-mono: var(--font-mono);
}

@layer base {
  [data-sb-theme^="dark"] {
    --color-background: hsl(222.2 84% 4.9%);
    --color-foreground: hsl(210 40% 98%);
    --color-card: hsl(222.2 84% 4.9%);
    --color-card-foreground: hsl(210 40% 98%);
    --color-popover: hsl(222.2 84% 4.9%);
    --color-popover-foreground: hsl(210 40% 98%);
    --color-primary: hsl(210 40% 98%);
    --color-primary-foreground: hsl(222.2 47.4% 11.2%);
    --color-secondary: hsl(217.2 32.6% 17.5%);
    --color-secondary-foreground: hsl(210 40% 98%);
    --color-muted: hsl(217.2 32.6% 17.5%);
    --color-muted-foreground: hsl(215 20.2% 65.1%);
    --color-accent: hsl(217.2 32.6% 17.5%);
    --color-accent-foreground: hsl(210 40% 98%);
    --color-destructive: hsl(0 62.8% 30.6%);
    --color-destructive-foreground: hsl(210 40% 98%);
    --color-border: hsl(217.2 32.6% 17.5%);
    --color-input: hsl(217.2 32.6% 17.5%);
    --color-ring: hsl(212.7 26.8% 83.9%);
    --color-success: hsl(142 71% 45%);
    --color-success-foreground: hsl(0 0% 100%);

    --sb--color-background: hsl(222.2 84% 4.9%);
    --sb--color-foreground: hsl(210 40% 98%);
    --sb--color-card: hsl(222.2 84% 4.9%);
    --sb--color-card-foreground: hsl(210 40% 98%);
    --sb--color-popover: hsl(222.2 84% 4.9%);
    --sb--color-popover-foreground: hsl(210 40% 98%);
    --sb--color-primary: hsl(210 40% 98%);
    --sb--color-primary-foreground: hsl(222.2 47.4% 11.2%);
    --sb--color-secondary: hsl(217.2 32.6% 17.5%);
    --sb--color-secondary-foreground: hsl(210 40% 98%);
    --sb--color-muted: hsl(217.2 32.6% 17.5%);
    --sb--color-muted-foreground: hsl(215 20.2% 65.1%);
    --sb--color-accent: hsl(217.2 32.6% 17.5%);
    --sb--color-accent-foreground: hsl(210 40% 98%);
    --sb--color-destructive: hsl(0 62.8% 30.6%);
    --sb--color-destructive-foreground: hsl(210 40% 98%);
    --sb--color-border: hsl(217.2 32.6% 17.5%);
    --sb--color-input: hsl(217.2 32.6% 17.5%);
    --sb--color-ring: hsl(212.7 26.8% 83.9%);
    --sb--color-success: hsl(142 71% 45%);
    --sb--color-success-foreground: hsl(0 0% 100%);
  }
}
@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]) {
		@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;
  }
}

/* Superellipse corners via the CSS Houdini Paint API.
 * Only Chromium browsers ship paint() today — Firefox and Safari fall back
 * to a regular border-radius via the @supports query below. Override the
 * fallback radius per-element with --sb--smooth-corners-fallback if needed. */
@utility smooth-corners {
  border-radius: var(--sb--smooth-corners-fallback, 0.75rem);

  @supports (mask-image: paint(smooth-corners)) {
    border-radius: 0;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
  }
}

@layer base {
  :root {
    --sb--smooth-corners: 4;
    --sb--radius-md: var(--radius-md);
  }
}

/*
 * Prevent unlayered CSS framework resets (e.g. Primer's `button { border-radius: 0 }`)
 * from overriding layered Tailwind utilities on storyboard UI elements.
 * `revert-layer` falls back to the value from the cascade layers (Tailwind utilities).
 */
[data-slot="button"] {
  border-radius: revert-layer;
  font-weight: revert-layer;
}

[data-slot="panel-content"] select,
[data-slot="panel-content"] input {
  border-radius: revert-layer;
}
