@import 'tailwindcss';

@import 'tw-animate-css';

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

@import './theme/theme.default.css' layer(theme);
@import './theme/theme.dark.css' layer(theme);
@import './theme/theme.sidebar.css' layer(theme);

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

@source inline("{,}grid-cols-{1..12}");
@source inline("{,}gap-{0..12}");

@utility text-* {
  color: --value(--color-* -text) !important;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  *:focus-visible {
    outline: none;
  }

  html,
  body {
    @apply h-full min-h-full;
  }

  body {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);

    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    color-scheme: light dark;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;

    scroll-behavior: smooth;
    word-break: break-word;
    overflow-anchor: none;

    @apply from-bg-start to-bg-end overflow-hidden bg-linear-to-b text-[var(--color-text-primary)] antialiased;
  }
}

@layer theme {
  @keyframes shimmer {
    from {
      background-position: -200% 0;
    }
    to {
      background-position: 200% 0;
    }
  }

  .animate-shimmer {
    animation: shimmer 2s infinite linear;
  }
}
