import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./lib/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)", "system-ui", "sans-serif"],
        display: ["var(--font-display)", "system-ui", "sans-serif"],
      },
      colors: {
        // Finzone brand: green-emerald + dark
        brand: {
          DEFAULT: "#10b981", // emerald-500
          dark: "#059669",
          light: "#34d399",
          accent: "#fbbf24", // amber for crypto
        },
        bg: {
          base: "rgb(var(--bg-base) / <alpha-value>)",
          elevated: "rgb(var(--bg-elevated) / <alpha-value>)",
          overlay: "rgb(var(--bg-overlay) / <alpha-value>)",
          inset: "rgb(var(--bg-inset) / <alpha-value>)",
        },
        ink: {
          primary: "rgb(var(--ink-primary) / <alpha-value>)",
          secondary: "rgb(var(--ink-secondary) / <alpha-value>)",
          muted: "rgb(var(--ink-muted) / <alpha-value>)",
        },
        stroke: {
          subtle: "rgb(var(--stroke-subtle) / <alpha-value>)",
          DEFAULT: "rgb(var(--stroke) / <alpha-value>)",
        },
      },
      maxWidth: {
        container: "1280px",
      },
    },
  },
  plugins: [],
};

export default config;