/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      // Extra-small breakpoint for fine mobile-first control (additive — does not
      // affect the default sm/md/lg/xl screens).
      screens: {
        xs: '400px',
      },

      // --- Typography ---
      fontFamily: {
        display: ['"Instrument Serif"', 'Georgia', 'serif'],
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'Consolas', 'monospace'],
      },

      // --- Color System: "Modern Trust" ---
      colors: {
        // Semantic surface colors
        surface: {
          DEFAULT: '#09090b',        // zinc-950 — primary bg
          secondary: '#0a0f1a',      // navy-black — command center sections
          card: 'rgba(255,255,255,0.05)',
          'card-hover': 'rgba(255,255,255,0.08)',
        },
        // Semantic border
        border: {
          subtle: 'rgba(255,255,255,0.05)',
          hover: 'rgba(255,255,255,0.10)',
        },
        // Accent system
        accent: {
          DEFAULT: '#3b82f6',        // Blue-500 — primary action, trust
          hover: '#2563eb',          // Blue-600
          data: '#06b6d4',           // Cyan-500 — HUD/data readouts ONLY
          home: '#10b981',           // Emerald-500 — homeowner warmth/safety
          urgency: '#f59e0b',        // Amber-500 — weather alerts, deadlines
          danger: '#ef4444',         // Red-500 — critical states only
        },
      },

      // --- Spacing & Layout ---
      maxWidth: {
        'content': '80rem',         // 1280px — primary content width
        'prose': '56rem',           // 896px — text-heavy sections
      },

      // --- Construction-themed background patterns ---
      backgroundImage: {
        // Blueprint grid — engineering/architectural precision
        'blueprint': [
          'linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px)',
          'linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px)',
        ].join(', '),
        // Blueprint with finer sub-grid
        'blueprint-fine': [
          'linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px)',
          'linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px)',
          'linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px)',
          'linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px)',
        ].join(', '),
      },
      backgroundSize: {
        'blueprint': '48px 48px',
        'blueprint-fine': '12px 12px, 12px 12px, 48px 48px, 48px 48px',
      },
    },
  },
  plugins: [],
}