@layer theme, base, components;
@import "tailwindcss/theme.css" layer(theme) prefix(ino);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/geist";
@import "@fontsource-variable/geist-mono";

@custom-variant dark (&:is(.dark *));
@source "./**/*.{js,jsx,ts,tsx}";

@theme inline {
  --font-heading: var(--font-sans);
  --font-sans: "Geist Variable", sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, monospace;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-primary-dark: color-mix(in oklch, var(--primary) 85%, black);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-foreground: var(--foreground);
  --color-background: var(--background);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(59.53% 0.20544 256.29);
  --primary-foreground: oklch(0.97 0.014 254.604);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --badge-shape-preview: oklch(0.78 0 0);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.546 0.245 262.881);
  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(59.53% 0.20544 256.29);
  --primary-foreground: oklch(0.97 0.014 254.604);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --badge-shape-preview: oklch(0.55 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.623 0.214 259.815);
  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply ino:border-border ino:outline-ring/50;
  }
  #wpcontent {
    @apply ino:bg-background ino:pl-0!;
  }
}

img {
  display: inline-block;
}

.ino\:custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.ino\:custom-scrollbar::-webkit-scrollbar-track {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.ino\:custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c4c4c4;
  border-radius: 40px;
}

.ino\:custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #b1b1b1;
}

/* WP admin's unlayered `a:focus` rule (2px radius, focus shadow, dark text)
   beats our layered utilities. Roll those properties back to whatever the
   link's own utility classes set. The Halloween CTA is styled by its own
   unlayered CSS, which revert-layer would also undo, so leave it alone. */
#store-manager-dashboard a:focus:not(.cpbw-hw-cta) {
  border-radius: revert-layer;
  box-shadow: revert-layer;
  color: revert-layer;
}

/* CodeMirror injects its own monospace font at runtime, so override it here */
.cpbw-code-panel .cm-scroller {
  font-family: "Geist Mono Variable", ui-monospace, monospace !important;
}

/* Slim dark scrollbars for the HTML/CSS code editors */
.cpbw-code-panel .cm-scroller::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.cpbw-code-panel .cm-scroller::-webkit-scrollbar-track,
.cpbw-code-panel .cm-scroller::-webkit-scrollbar-corner {
  background: #282c34;
}

.cpbw-code-panel .cm-scroller::-webkit-scrollbar-thumb {
  background: #4b5263;
  border: 3px solid #282c34;
  border-radius: 999px;
}

.cpbw-code-panel .cm-scroller::-webkit-scrollbar-thumb:hover {
  background: #636d83;
}

@supports not selector(::-webkit-scrollbar) {
  .cpbw-code-panel .cm-scroller {
    scrollbar-width: thin;
    scrollbar-color: #4b5263 #282c34;
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: #121212 !important;
}

.ino\:custom-range {
  height: max-content;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
}

.ino\:custom-range::-webkit-slider-runnable-track {
  background: #d1d5db;
  height: 8px;
  border-radius: 100px;
}

/* Thumb */
.ino\:custom-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  height: 28px;
  margin-top: -10px;
  width: 8px;
  background: #007cf5;
  border-radius: 10px;
  cursor: pointer;
}

.ino\:custom-range::-moz-range-track {
  background: #4f46e5;
  height: 3px;
}

.ino\:custom-range::-moz-range-thumb {
  height: 18px;
  width: 18px;
  background: #4f46e5;
  border: none;
}