@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: theme('colors.background.light');
    --background-muted: theme('colors.background.muted.light');
    --foreground: theme('colors.foreground.light');
    --foreground-muted: theme('colors.foreground.muted.light');
    --border: theme('colors.border.light');
    --border-muted: theme('colors.border.muted.light');
    --ring: theme('colors.ring.light');
    --ring-offset: theme('colors.ring.offset.light');
  }

  .dark {
    --background: theme('colors.background.dark');
    --background-muted: theme('colors.background.muted.dark');
    --foreground: theme('colors.foreground.dark');
    --foreground-muted: theme('colors.foreground.muted.dark');
    --border: theme('colors.border.dark');
    --border-muted: theme('colors.border.muted.dark');
    --ring: theme('colors.ring.dark');
    --ring-offset: theme('colors.ring.offset.dark');
  }

  *,
  ::before,
  ::after {
    border-color: var(--border);
  }

  * {
    box-sizing: border-box;
    position: relative;
  }

  html {
    font-size: 16px;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  [hidden] {
    display: none;
  }

  [inert] {
    pointer-events: none;
    user-select: none;
  }
}