import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // Light pages, dark product. See docs/DESIGN.md before adding a colour.
      colors: {
        paper: { DEFAULT: '#FAFAF9', 2: '#F3F3F0' },
        line: { DEFAULT: '#E6E6E3', strong: '#D4D4D0' },
        ink: { DEFAULT: '#0E1116', soft: '#3D434D', muted: '#6B717B', faint: '#9AA0A8' },
        // The netOrk UI's own background, so screenshot edges disappear into the stage.
        night: { DEFAULT: '#020617', line: '#1E293B' },
        accent: { DEFAULT: '#0369A1', hover: '#075985', soft: '#E0F2FE' },
        drift: { DEFAULT: '#B45309', soft: '#FEF3C7' },
        sync: { DEFAULT: '#15803D', soft: '#DCFCE7' },
      },
      fontFamily: {
        sans: ['"Inter Variable"', ...defaultTheme.fontFamily.sans],
      },
      fontSize: {
        display: ['clamp(2.5rem, 1.5rem + 4vw, 4.75rem)', { lineHeight: '1.02', letterSpacing: '-0.04em', fontWeight: '600' }],
        h1: ['clamp(2rem, 1.5rem + 2.2vw, 3.25rem)', { lineHeight: '1.08', letterSpacing: '-0.03em', fontWeight: '600' }],
        h2: ['clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem)', { lineHeight: '1.12', letterSpacing: '-0.025em', fontWeight: '600' }],
        h3: ['1.125rem', { lineHeight: '1.45', letterSpacing: '-0.01em', fontWeight: '600' }],
        lead: ['clamp(1.0625rem, 1rem + 0.35vw, 1.25rem)', { lineHeight: '1.6' }],
        eyebrow: ['0.75rem', { lineHeight: '1rem', letterSpacing: '0.08em' }],
      },
      maxWidth: {
        page: '72rem',
        measure: '38rem',
      },
      boxShadow: {
        stage: '0 30px 60px -20px rgba(2, 6, 23, 0.35)',
      },
    },
  },
  plugins: [],
}