import forms from "@tailwindcss/forms";

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        "tertiary-fixed-dim": "#ddc39d",
        tertiary: "#1e1200",
        "secondary-fixed": "#d3e4fe",
        "on-error-container": "#93000a",
        "surface-container-lowest": "#ffffff",
        primary: "#091426",
        background: "#fbf8fa",
        "secondary-container": "#d0e1fb",
        "primary-fixed-dim": "#bcc7de",
        "tertiary-fixed": "#fadfb8",
        secondary: "#505f76",
        "on-secondary-fixed-variant": "#38485d",
        "on-primary-fixed-variant": "#3c475a",
        "surface-container-high": "#eae7e9",
        "on-tertiary-fixed-variant": "#564427",
        "surface-tint": "#545f73",
        "primary-fixed": "#d8e3fb",
        "surface-container-highest": "#e4e2e3",
        "inverse-surface": "#303032",
        "on-background": "#1b1b1d",
        "on-primary": "#ffffff",
        "on-surface-variant": "#45474c",
        error: "#ba1a1a",
        "inverse-on-surface": "#f3f0f2",
        "surface-container": "#f0edef",
        "on-tertiary-fixed": "#271902",
        "surface-container-low": "#f5f3f4",
        "on-surface": "#1b1b1d",
        "on-secondary-container": "#54647a",
        "inverse-primary": "#bcc7de",
        "on-tertiary-container": "#a38c6a",
        "surface-variant": "#e4e2e3",
        "tertiary-container": "#35260c",
        "on-primary-fixed": "#111c2d",
        "on-error": "#ffffff",
        "surface-dim": "#dcd9db",
        "primary-container": "#1e293b",
        outline: "#75777d",
        "outline-variant": "#c5c6cd",
        "on-tertiary": "#ffffff",
        surface: "#fbf8fa",
        "surface-bright": "#fbf8fa",
        "secondary-fixed-dim": "#b7c8e1",
        "on-secondary": "#ffffff",
        "on-primary-container": "#8590a6",
        "error-container": "#ffdad6",
        "on-secondary-fixed": "#0b1c30",
      },
      borderRadius: {
        DEFAULT: "0.125rem",
        lg: "0.25rem",
        xl: "0.5rem",
        full: "0.75rem",
      },
      spacing: {
        "margin-mobile": "16px",
        gutter: "24px",
        "stack-lg": "32px",
        "sidebar-width": "280px",
        "container-max": "1440px",
        "stack-sm": "8px",
        "stack-md": "16px",
      },
      fontFamily: {
        "body-sm": ["Inter", "system-ui", "sans-serif"],
        "title-sm": ["Inter", "system-ui", "sans-serif"],
        "headline-md": ["Inter", "system-ui", "sans-serif"],
        "body-md": ["Inter", "system-ui", "sans-serif"],
        "display-lg": ["Inter", "system-ui", "sans-serif"],
        "label-caps": ["IBM Plex Sans", "system-ui", "sans-serif"],
        "data-mono": ["IBM Plex Sans", "system-ui", "sans-serif"],
      },
      fontSize: {
        "body-sm": ["14px", { lineHeight: "20px", fontWeight: "400" }],
        "title-sm": ["18px", { lineHeight: "24px", fontWeight: "600" }],
        "headline-md": [
          "24px",
          { lineHeight: "32px", letterSpacing: "-0.01em", fontWeight: "600" },
        ],
        "body-md": ["16px", { lineHeight: "24px", fontWeight: "400" }],
        "display-lg": [
          "32px",
          { lineHeight: "40px", letterSpacing: "-0.02em", fontWeight: "700" },
        ],
        "label-caps": [
          "12px",
          { lineHeight: "16px", letterSpacing: "0.05em", fontWeight: "600" },
        ],
        "data-mono": ["14px", { lineHeight: "20px", fontWeight: "400" }],
      },
    },
  },
  plugins: [forms],
};