import type { Config } from "tailwindcss";
// @ts-ignore - colors.mjs uses ESM exports, TypeScript may warn but it works at runtime
import { colors as colorsDefinition } from "./colors.mjs";

const config: Config = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    fontSize: {
      'xs': '12px',
      'sm': '14px',    // Design: label-md, mono-data
      'base': '16px',  // Design: body-md
      'lg': '18px',    // Design: body-lg
      'xl': '20px',
      '2xl': '24px',   // Design: headline-sm
      '3xl': '30px',
      '4xl': '32px',   // Design: headline-md
      '5xl': '48px',   // Design: headline-lg
      '6xl': '64px',
    },
    spacing: {
      px: "1px",
      0: "0",
      1: "4px",      // unit
      2: "8px",      // stack-sm
      3: "12px",
      4: "16px",     // stack-md, gutter
      6: "24px",     // container-gap
      8: "32px",     // margin
      12: "48px",
      16: "64px",
      20: "80px",
      24: "96px",
      32: "128px",
    },
    extend: {
      fontFamily: {
        sans: ["'Space Grotesk'", "sans-serif"],
      },
      colors: colorsDefinition,
      keyframes: {
        scan: {
          '0%, 100%': { top: '0%' },
          '50%': { top: '100%' },
        }
      },
      animation: {
        'scan-fast': 'scan 2.5s ease-in-out infinite',
        'spin-slow': 'spin 3s linear infinite',
      }
    },
  },
  plugins: [],
};
export default config;