@import "@workspace/ui/globals.css";
@import "@workspace/appearance/globals.css";
@import "@workspace/media/globals.css";
@import "@workspace/search/globals.css";

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

@layer base {
  *,
  *::before,
  *::after {
    @apply border-slate-200 dark:border-slate-800;
  }

  html {
    @apply antialiased;
    background-color: var(--docs-background-light, var(--color-white));
    color: var(--docs-foreground-light, var(--color-slate-950));
    font-family: "DM Serif Display", Georgia, serif;
  }

  html.dark {
    background-color: var(--docs-background-dark, var(--color-slate-950));
    color: var(--docs-foreground-dark, var(--color-slate-100));
  }

  :root {
    --background: var(--docs-background-light, var(--color-white));
    --foreground: var(--docs-foreground-light, var(--color-slate-950));
    --card: var(--docs-background-light, var(--color-white));
    --card-foreground: var(--docs-foreground-light, var(--color-slate-950));
    --popover: var(--docs-background-light, var(--color-white));
    --popover-foreground: var(--docs-foreground-light, var(--color-slate-950));
    --primary: var(--color-indigo-600);
    --primary-foreground: var(--color-white);
    --secondary: var(--docs-surface-light, var(--color-slate-100));
    --secondary-foreground: var(
      --docs-foreground-light,
      var(--color-slate-950)
    );
    --muted: var(--docs-surface-light, var(--color-slate-100));
    --muted-foreground: var(--docs-muted-light, var(--color-slate-600));
    --accent: var(--docs-surface-light, var(--color-slate-100));
    --accent-foreground: var(--docs-foreground-light, var(--color-slate-950));
    --border: var(--color-slate-200);
    --input: var(--color-slate-200);
    --ring: var(--color-indigo-500);
    --sidebar: var(--docs-background-light, var(--color-white));
    --sidebar-foreground: var(--docs-foreground-light, var(--color-slate-950));
    --sidebar-border: var(--color-slate-200);
  }

  html.dark {
    --background: var(--docs-background-dark, var(--color-slate-950));
    --foreground: var(--docs-foreground-dark, var(--color-slate-100));
    --card: var(--docs-surface-dark, var(--color-slate-900));
    --card-foreground: var(--docs-foreground-dark, var(--color-slate-100));
    --popover: var(--docs-surface-dark, var(--color-slate-900));
    --popover-foreground: var(--docs-foreground-dark, var(--color-slate-100));
    --primary: var(--color-indigo-400);
    --primary-foreground: var(--color-slate-950);
    --secondary: var(--color-slate-800);
    --secondary-foreground: var(--docs-foreground-dark, var(--color-slate-100));
    --muted: var(--color-slate-800);
    --muted-foreground: var(--docs-muted-dark, var(--color-slate-400));
    --accent: var(--color-slate-800);
    --accent-foreground: var(--docs-foreground-dark, var(--color-slate-100));
    --border: var(--color-slate-800);
    --input: var(--color-slate-700);
    --ring: var(--color-indigo-400);
    --sidebar: var(--docs-surface-dark, var(--color-slate-900));
    --sidebar-foreground: var(--docs-foreground-dark, var(--color-slate-100));
    --sidebar-border: var(--color-slate-800);
  }

  body,
  #root {
    @apply min-h-dvh min-w-80;
  }

  body {
    @apply bg-inherit text-inherit;
  }

  ::selection {
    @apply bg-indigo-200 text-indigo-950 dark:bg-indigo-500/40 dark:text-indigo-50;
  }
}