@import "tailwindcss";

@plugin "tailwindcss-animate";
@plugin "tailwindcss-react-aria-components";

@theme {
  --blur-xs: 2px;

  --height-editor: calc(100vh - 20rem);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --transition-duration-25: 25ms;
  --transition-duration-50: 50ms;

  /* Design tokens: border-radius */
  --radius-sm: 0.375rem; /* 6px — chips, badges, inline elements */
  --radius-md: 0.5rem; /* 8px — buttons, inputs, interactive controls */
  --radius-lg: 0.75rem; /* 12px — cards, panels, dialogs, popovers */

  /* Design tokens: box-shadow */
  --shadow-surface: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);
  --shadow-overlay: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 6px -1px rgb(0 0 0 / 0.06);

  --animate-loading: loader 0.8s infinite ease-in-out;

  @keyframes loader {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
  width: 100%;
  max-width: 96rem; /* 1536px - constrain on large displays */

  @media (width >= theme(--breakpoint-sm)) {
    padding-inline: 2rem;
  }
  @media (width >= theme(--breakpoint-lg)) {
    padding-inline: 4rem;
  }

  @media (width >= theme(--breakpoint-xl)) {
    padding-inline: 5rem;
  }

  @media (width >= theme(--breakpoint-2xl)) {
    padding-inline: 6rem;
  }
}

@supports (scrollbar-gutter: stable) {
  html {
    scrollbar-gutter: stable;
  }
}

.cm-merge-theme {
  height: 100% !important;
}

.cm-mergeView {
  height: 100% !important;
}

.cm-mergeViewEditors {
  height: 100%;
}

.cm-mergeViewEditor {
  height: 100% !important;
}

/* Weirdest class name characters but ok */
.cm-mergeView .ͼ1 .cm-scroller,
.cm-mergeView .ͼ1 {
  height: 100% !important;
}