@import "./allotment.css";

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

@layer base {
  html {
    touch-action: manipulation;
    font-feature-settings:
      "rlig" 1,
      "calt" 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
  }

  @supports (font-synthesis-weight: none) {
    html {
      font-synthesis: initial;
      font-synthesis-weight: none;
    }
  }
}

@layer utilities {
  .s-checkerboard {
    background-image:
      linear-gradient(
        45deg,
        var(--tw-checker-color) 25%,
        transparent 25%,
        transparent 75%,
        var(--tw-checker-color) 75%
      ),
      linear-gradient(
        45deg,
        var(--tw-checker-color) 25%,
        transparent 25%,
        transparent 75%,
        var(--tw-checker-color) 75%
      );
    background-size: 40px 40px;
    background-position:
      0 0,
      20px 20px;
    background-color: theme("colors.white"); /* Base color */
    --tw-checker-color: theme("colors.gray.50"); /* Pattern color */
  }

  .s-dark .s-checkerboard {
    background-color: theme("colors.black"); /* Dark mode base color */
    --tw-checker-color: theme("colors.slate.950"); /* Dark mode pattern color */
  }
}