/** @type {import('tailwindcss').Config} */

export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    container: {
      center: true,
    },
    extend: {
      colors: {
        brand: {
          50: "#e8f2ff",
          100: "#cfe5ff",
          200: "#9fcbff",
          300: "#66abff",
          400: "#2e8dff",
          500: "#007aff",
          600: "#0064d6",
          700: "#004fad",
          800: "#003b82",
          900: "#00275a",
        },
        background: {
          50: "#ffffff",
          100: "#f7f7fa",
          200: "#f2f2f7",
          300: "#e5e5ea",
          400: "#d1d1d6",
          500: "#aeaeb2",
          600: "#8e8e93",
          700: "#3a3a3c",
          800: "#1c1c1e",
          900: "#000000",
        },
        text: {
          50: "#f5f5f7",
          100: "#e3e3e8",
          200: "#c7c7cc",
          300: "#aeaeb2",
          400: "#8e8e93",
          500: "#6e6e73",
          600: "#48484a",
          700: "#3c3c43",
          800: "#1d1d1f",
          900: "#000000",
        },
        icon: {
          50: "#f5f5f7",
          100: "#e5e5ea",
          200: "#d1d1d6",
          300: "#c7c7cc",
          400: "#aeaeb2",
          500: "#8e8e93",
          600: "#6e6e73",
          700: "#48484a",
          800: "#2c2c2e",
          900: "#1d1d1f",
        },
      },
      fontFamily: {
        sans: ['"DM Sans"', "ui-sans-serif", "sans-serif", "system-ui"],
        mono: ['"JetBrains Mono"', "monospace"],
      },
      borderRadius: {
        DEFAULT: "1.2rem",
        lg: "1.2rem",
        md: "0.9rem",
        sm: "0.6rem",
      },
      boxShadow: {
        "2xs": "0 1px 2px -1px rgba(0, 0, 0, 0.04)",
        xs: "0 1px 2px 0 rgba(0, 0, 0, 0.04)",
        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.05)",
        DEFAULT: "0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.05)",
        md: "0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.05)",
        lg: "0 8px 24px -8px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.05)",
        xl: "0 16px 40px -10px rgba(0, 0, 0, 0.10), 0 8px 16px -8px rgba(0, 0, 0, 0.06)",
        "2xl": "0 24px 64px -12px rgba(0, 0, 0, 0.12)",
      },
    },
  },
  plugins: [],
};