import type { Config } from "tailwindcss";

export default {
  content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          "Cairo",
          "Noto Sans Arabic",
          "Inter",
          "ui-sans-serif",
          "system-ui",
          "sans-serif",
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol",
          "Noto Color Emoji",
        ],
        arabic: [
          "Cairo",
          "Noto Sans Arabic",
          "ui-sans-serif",
          "system-ui",
          "sans-serif",
        ],
      },
      screens: {
        'xs': '320px',
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
        '3xl': '1920px',
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        'sidebar-collapsed': '4rem',    // 64px
        'sidebar-expanded': '16rem',    // 256px
      },
      zIndex: {
        'overlay': '40',
        'sidebar': '50',
        'header': '60',
        'modal': '70',
        'toast': '80',
      },
      transitionProperty: {
        'sidebar': 'width, transform, opacity',
      },
    },
  },
  plugins: [
    require('tailwindcss-rtl'),
  ],
} satisfies Config;