import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        // Design System Colors from Figma
        week2: {
          DEFAULT: "#155DFC",
          light: "#E8F0FE",
          dark: "#0D47A1",
        },
        week3: {
          DEFAULT: "#16A34A",
          light: "#E8F5E9",
          dark: "#0D5C28",
        },
        canvas: {
          border: "#D1D5DC",
          bg: "#FFFFFF",
          muted: "#6B7280",
          text: "#111827",
        },
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
      },
      spacing: {
        // A3 canvas dimensions at 72 DPI
        "canvas-width": "1587px",
        "canvas-height": "1122px",
      },
      aspectRatio: {
        a3: "1.414",
      },
    },
  },
  plugins: [],
};

export default config;