/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      // Semantic tokens backed by CSS variables (see index.css). Using these
      // instead of raw grays lets every surface switch with the theme.
      // Make every `border`/`divide` utility theme-aware by default, so a bare
      // `border` never falls back to Tailwind's light gray-200 in dark mode.
      borderColor: {
        DEFAULT: "rgb(var(--app-border) / <alpha-value>)",
      },
      divideColor: {
        DEFAULT: "rgb(var(--app-border) / <alpha-value>)",
      },
      colors: {
        app: {
          bg: "rgb(var(--app-bg) / <alpha-value>)",
          surface: "rgb(var(--app-surface) / <alpha-value>)",
          elevated: "rgb(var(--app-elevated) / <alpha-value>)",
          border: "rgb(var(--app-border) / <alpha-value>)",
          fg: "rgb(var(--app-fg) / <alpha-value>)",
          muted: "rgb(var(--app-muted) / <alpha-value>)",
          faint: "rgb(var(--app-faint) / <alpha-value>)",
          accent: "rgb(var(--app-accent) / <alpha-value>)",
          "accent-fg": "rgb(var(--app-accent-fg) / <alpha-value>)",
          hover: "rgb(var(--app-hover) / <alpha-value>)",
          active: "rgb(var(--app-active) / <alpha-value>)",
        },
      },
    },
  },
  plugins: [],
};