import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "1.25rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        display: ["var(--font-display)", "Inter", "system-ui", "sans-serif"],
        mono: ["var(--font-mono)", "ui-monospace", "monospace"],
      },
      fontSize: {
        // Editorial type-scale (Major Third), line-height tuned per role
        "display-2xl": ["4.5rem", { lineHeight: "1.05", letterSpacing: "-0.02em" }],
        "display-xl": ["3.5rem", { lineHeight: "1.08", letterSpacing: "-0.015em" }],
        "display-lg": ["2.5rem", { lineHeight: "1.12", letterSpacing: "-0.01em" }],
        "heading-md": ["1.5rem", { lineHeight: "1.25", letterSpacing: "-0.005em" }],
        "heading-sm": ["1.125rem", { lineHeight: "1.30" }],
        "body-lg": ["1.125rem", { lineHeight: "1.55" }],
        "body": ["1rem", { lineHeight: "1.55" }],
        "body-sm": ["0.875rem", { lineHeight: "1.5" }],
        "caption": ["0.75rem", { lineHeight: "1.4", letterSpacing: "0.04em" }],
      },
      colors: {
        // shadcn-Brücke (bleibt kompatibel)
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // Editorial Tokens (RGB var format for /opacity utilities)
        surface: {
          base: "rgb(var(--surface-base) / <alpha-value>)",
          raised: "rgb(var(--surface-raised) / <alpha-value>)",
          sunken: "rgb(var(--surface-sunken) / <alpha-value>)",
          inverse: "rgb(var(--surface-inverse) / <alpha-value>)",
        },
        ink: {
          primary: "rgb(var(--ink-primary) / <alpha-value>)",
          secondary: "rgb(var(--ink-secondary) / <alpha-value>)",
          tertiary: "rgb(var(--ink-tertiary) / <alpha-value>)",
          disabled: "rgb(var(--ink-disabled) / <alpha-value>)",
        },
        brand: {
          50: "rgb(var(--brand-50) / <alpha-value>)",
          100: "rgb(var(--brand-100) / <alpha-value>)",
          200: "rgb(var(--brand-200) / <alpha-value>)",
          400: "rgb(var(--brand-400) / <alpha-value>)",
          500: "rgb(var(--brand-500) / <alpha-value>)",
          600: "rgb(var(--brand-600) / <alpha-value>)",
          700: "rgb(var(--brand-700) / <alpha-value>)",
          900: "rgb(var(--brand-900) / <alpha-value>)",
        },
        cat: {
          generator: "rgb(var(--cat-generator) / <alpha-value>)",
          calculator: "rgb(var(--cat-calculator) / <alpha-value>)",
          converter: "rgb(var(--cat-converter) / <alpha-value>)",
          text: "rgb(var(--cat-text) / <alpha-value>)",
          security: "rgb(var(--cat-security) / <alpha-value>)",
          image: "rgb(var(--cat-image) / <alpha-value>)",
          developer: "rgb(var(--cat-developer) / <alpha-value>)",
        },
      },
      borderRadius: {
        xs: "4px",
        sm: "6px",
        DEFAULT: "10px",
        md: "12px",
        lg: "16px",
        xl: "22px",
        "2xl": "28px",
      },
      boxShadow: {
        edge: "0 0 0 1px rgb(15 18 25 / 0.06)",
        rest: "0 1px 2px rgb(15 18 25 / 0.04), 0 0 0 1px rgb(15 18 25 / 0.05)",
        raised:
          "0 4px 14px -6px rgb(15 18 25 / 0.10), 0 0 0 1px rgb(15 18 25 / 0.05)",
        hover:
          "0 12px 28px -10px rgb(48 51 130 / 0.18), 0 0 0 1px rgb(15 18 25 / 0.07)",
        focus: "0 0 0 3px rgb(var(--brand-500) / 0.25)",
        inset: "inset 0 1px 0 rgb(255 255 255 / 0.6)",
      },
      spacing: {
        "section-y-sm": "4rem",
        "section-y": "6rem",
        "section-y-lg": "8rem",
      },
      transitionTimingFunction: {
        "out-expo": "cubic-bezier(0.2, 0.8, 0.2, 1)",
        "out-back": "cubic-bezier(0.34, 1.4, 0.64, 1)",
      },
      backgroundImage: {
        "grid-faint":
          "linear-gradient(to right, rgb(15 18 25 / 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgb(15 18 25 / 0.04) 1px, transparent 1px)",
        "noise":
          "radial-gradient(rgb(15 18 25 / 0.025) 1px, transparent 1px)",
      },
      backgroundSize: {
        "grid-64": "64px 64px",
        "noise-3": "3px 3px",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
        "fade-up": {
          from: { opacity: "0", transform: "translateY(8px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
        "shimmer": {
          "0%": { backgroundPosition: "-200% 0" },
          "100%": { backgroundPosition: "200% 0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "fade-up": "fade-up 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both",
        "shimmer": "shimmer 1.4s linear infinite",
      },
    },
  },
  plugins: [],
};

export default config;