import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        zenith: {
          bg: "#F6F9FF",
          surface: "#FFFFFF",
          dim: "#D4DBE2",
          low: "#EEF4FC",
          container: "#E8EEF6",
          high: "#E3E9F1",
          highest: "#DDE3EB",
          border: "#E2E8F0",
          borderDark: "#C4C7C9",
          text: "#161C22",
          muted: "#444749",
          subtle: "#747779",
          black: "#000000",
          slate: "#475569",
          accent: "#1E293B",
        },
        brand: {
          50: "#f0f4ff",
          100: "#dbe4fe",
          200: "#bfceff",
          500: "#3b68ff",
          600: "#1845eb",
          900: "#0b1c5c",
        },
        emerald: {
          500: "#10b981",
          600: "#059669",
          700: "#047857",
        },
        amber: {
          400: "#fbbf24",
          500: "#f59e0b",
        },
      },
      fontFamily: {
        display: ["var(--font-hanken)", "Hanken Grotesk", "system-ui", "sans-serif"],
        sans: ["var(--font-inter)", "Inter", "system-ui", "sans-serif"],
        mono: ["var(--font-mono)", "JetBrains Mono", "monospace"],
      },
      letterSpacing: {
        tightest: "-0.04em",
        tighter: "-0.02em",
        tight: "-0.01em",
        caps: "0.1em",
      },
      animation: {
        "scan-line": "scanline 2s ease-in-out infinite",
        "fade-in": "fadeIn 0.2s ease-in-out",
      },
      keyframes: {
        scanline: {
          "0%, 100%": { transform: "translateY(0%)" },
          "50%": { transform: "translateY(100%)" },
        },
        fadeIn: {
          "0%": { opacity: "0", transform: "translateY(4px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
      },
    },
  },
  plugins: [],
};

export default config;