/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,ts,svelte}"],
  theme: {
    extend: {
      // Custom design system colors
      colors: {
        // Browser-specific colors that work well in both themes
        browser: {
          bg: "rgb(var(--browser-bg) / <alpha-value>)",
          surface: "rgb(var(--browser-surface) / <alpha-value>)",
          text: "rgb(var(--browser-text) / <alpha-value>)",
          muted: "rgb(var(--browser-muted) / <alpha-value>)",
          accent: "rgb(var(--browser-accent) / <alpha-value>)",
          border: "rgb(var(--browser-border) / <alpha-value>)",
        },
      },
      // Animation speeds optimized for browser UI
      transitionDuration: {
        150: "150ms", // Fast interactions
        250: "250ms", // UI feedback
        400: "400ms", // Smooth transitions
      },
      // Typography scale for browser UI
      fontSize: {
        xs: ["0.75rem", "1rem"],
        sm: ["0.875rem", "1.25rem"],
        base: ["1rem", "1.5rem"],
        lg: ["1.125rem", "1.75rem"],
      },
      // Spacing for compact UI elements
      spacing: {
        18: "4.5rem",
        22: "5.5rem",
      },
    },
  },
  plugins: [],
  // Manual dark mode control (not system preference)
  // This allows GTK to control theme via CSS class
  darkMode: "class",
};