@import "tailwindcss";
@import "./fonts.css";
@import "./theme.css";

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

@layer base {
  html {
    color-scheme: dark;
  }

  html,
  body {
    min-height: 100vh;
  }

  #root {
    min-height: 100vh;
  }

  body {
    @apply bg-canvas text-zinc-100 antialiased;
    font-weight: 450;
    font-feature-settings:
      "ss01" on,
      "cv01" on;
  }

  button:not(:disabled),
  a,
  select,
  summary,
  [role="button"] {
    cursor: pointer;
  }

  *:focus-visible {
    @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
  }

  ::selection {
    @apply bg-accent-500/[0.28] text-accent-50;
  }
}