chorus-services/modules/teaser/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Core Brand Colors
        'carbon': {
          950: '#000000',
          900: '#0a0a0a', 
          800: '#1a1a1a',
          700: '#2a2a2a',
          600: '#666666',
          500: '#808080',
          400: '#a0a0a0',
          300: '#c0c0c0',
          200: '#e0e0e0',
          100: '#f0f0f0',
          50: '#f8f8f8'
        },
        'mulberry': {
          950: '#0b0213',
          900: '#1a1426',
          800: '#2a2639',
          700: '#3a384c',
          600: '#4a4a5f',
          500: '#5a5c72',
          400: '#7a7e95',
          300: '#9aa0b8',
          200: '#bac2db',
          100: '#dae4fe',
          50: '#f0f4ff'
        },
        'walnut': {
          950: '#1E1815',
          900: '#403730',
          800: '#504743',
          700: '#605756',
          600: '#706769',
          500: '#80777c',
          400: '#90878f',
          300: '#a09aa2',
          200: '#b0adb5',
          100: '#c0c0c8',
          50: '#d0d3db',
          25: '#e0e6ee'
        },
        'nickel': {
          950: '#171717',
          900: '#2a2a2a',
          800: '#3d3d3d',
          700: '#505050',
          600: '#636363',
          500: '#767676',
          400: '#c1bfb1',
          300: '#d4d2c6',
          200: '#e7e5db',
          100: '#faf8f0',
          50: '#fdfcf8'
        },
        // System Colors
        'ocean': {
          950: '#2a3441',
          900: '#3a4654',
          800: '#4a5867',
          700: '#5a6c80',
          600: '#6a7e99',
          500: '#7a90b2',
          400: '#8ba3c4',
          300: '#9bb6d6',
          200: '#abc9e8',
          100: '#bbdcfa',
          50: '#cbefff'
        },
        'eucalyptus': {
          950: '#2a3330',
          900: '#3a4540',
          800: '#4a5750',
          700: '#515d54',
          600: '#5a6964',
          500: '#6a7974',
          400: '#7a8a7f',
          300: '#8a9b8f',
          200: '#9aac9f',
          100: '#aabdaf',
          50: '#bacfbf'
        },
        'sand': {
          950: '#8E7B5E',
          900: '#99886E',
          800: '#A4957E',
          700: '#AFA28E',
          600: '#BAAF9F',
          500: '#C5BCAF',
          400: '#D0C9BF',
          300: '#DBD6CF',
          200: '#E6E3DF',
          100: '#F1F0EF',
          50: '#F1F0EF',
        },
        'coral': {
          950: '#6A4A48',
          900: '#7B5D5A',
          800: '#8C706C',
          700: '#9D8380',
          600: '#AE9693',
          500: '#BFAAA7',
          400: '#D0BDBB',
          300: '#E1D1CF',
          200: '#F2E4E3',
          100: '#9e979c',
          50: '#aea7ac'
        }
      },
      fontFamily: {
        sans: ['var(--font-inter)', 'Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
        mono: ['Inconsolata', 'ui-monospace', 'monospace'],
        logo: ['var(--font-exo)', 'Exo', 'Inter Tight', 'sans-serif']
      },
      spacing: {
        'chorus-xxs':  '0.854rem',
        'chorus-xs':   '0.945rem',
        'chorus-sm':   '1.000rem', /* fontSize = 16px */
        'chorus-base': '1.250rem', 
        'chorus-md':   '1.953rem', 
        'chorus-lg':   '2.441rem',
        'chorus-xl':   '3.052rem',
        'chorus-xxl':  '4.768rem', /* fontSize = px */
      },
      fontSize: {
        'xs':   ['0.854rem', { lineHeight: '1.00rem', fontWeight: '600' }],
        'sm':   ['0.954rem', { lineHeight: '1.10rem', fontWeight: '500' }],
        'base': ['1rem',     { lineHeight: '1.50rem', fontWeight: '400' }],
        'lg':   ['1.25rem',  { lineHeight: '1.75rem', fontWeight: '400' }],
        'xl':   ['1.563rem', { lineHeight: '2.00rem', fontWeight: '400' }],
        '2xl':  ['1.953rem', { lineHeight: '2.50rem', fontWeight: '300' }],
        '3xl':  ['2.441rem', { lineHeight: '3.00rem', fontWeight: '200' }],
        '4xl':  ['3.052rem', { lineHeight: '3.50rem', fontWeight: '100' }],
        '5xl':  ['3.815rem', { lineHeight: '4.00rem', fontWeight: '100' }],
        'h7': ['1.000rem', { lineHeight: '1.25rem', fontWeight: '400' }],
        'h6': ['1.250rem', { lineHeight: '1.563rem', fontWeight: '500' }],
        'h5': ['1.563rem', { lineHeight: '1.953rem', fontWeight: '500' }],
        'h4': ['1.953rem', { lineHeight: '2.441rem', fontWeight: '600' }],
        'h3': ['2.441rem', { lineHeight: '3.052rem', fontWeight: '600' }],
        'h2': ['3.052rem', { lineHeight: '4.768rem', fontWeight: '700' }],
        'h1': ['4.768rem', { lineHeight: '6.96rem', fontWeight: '700' }],
        'display-sm': ['3.815rem', { lineHeight: '4rem', fontWeight: '800' }],
        'display-md': ['4.768rem', { lineHeight: '5rem', fontWeight: '800' }],
        'display-lg': ['5.96rem', { lineHeight: '6rem', fontWeight: '800' }],
      },
      width: {
        'rem-xs':   '0.640rem',
        'rem-sm':   '0.800rem', 
        'rem-base': '1.000rem',
        'rem-lg':   '1.250rem',
        'rem-xl':   '1.563rem',
        'rem-2xl':  '1.953rem',
        'rem-3xl':  '2.441rem',
        'rem-4xl':  '3.052rem',
        'rem-5xl':  '3.815rem',
      },
      height: {
        'rem-xs':   '0.640rem',
        'rem-sm':   '0.800rem',
        'rem-base': '1.000rem', 
        'rem-lg':   '1.250rem',
        'rem-xl':   '1.563rem',
        'rem-2xl':  '1.953rem',
        'rem-3xl':  '2.441rem',
        'rem-4xl':  '3.052rem',
        'rem-5xl':  '3.815rem',
      },
      borderRadius: {
        'none': '0',
        'micro': '0.125rem',
        'sm': '0.25rem',
        'base': '0.375rem',
        'md': '0.5rem',
        'lg': '0.75rem',
        'xl': '1rem',
        'full': '9999px',
      },
      animation: {
        'fade-in': 'fadeIn 0.6s ease-out',
        'slide-up': 'slideUp 0.8s ease-out',
        'mobius-rotate': 'mobiusRotate 20s linear infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(2rem)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        mobiusRotate: {
          '0%': { transform: 'rotateY(0deg) rotateX(10deg)' },
          '100%': { transform: 'rotateY(360deg) rotateX(10deg)' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    function({ addUtilities }) {
      addUtilities({
        // H7 Utility Class
        '.h7': { 
          fontSize: '0.8rem', 
          lineHeight: '1.25rem', 
          fontWeight: '700', 
          letterSpacing: '0.05em', 
          textTransform: 'uppercase' 
        },
        
        // Complete H1-H7 Typography Utilities
        '.text-h1': { 
          fontSize: '4.768rem', 
          lineHeight: '6.96rem', 
          fontWeight: '700',
          fontFamily: 'var(--font-exo), Exo, Inter Tight, sans-serif'
        },
        '.text-h2': { 
          fontSize: '3.052rem', 
          lineHeight: '4.768rem', 
          fontWeight: '700',
          fontFamily: 'var(--font-exo), Exo, Inter Tight, sans-serif'
        },
        '.text-h3': { 
          fontSize: '2.441rem', 
          lineHeight: '3.052rem', 
          fontWeight: '600',
          fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
        },
        '.text-h4': { 
          fontSize: '1.953rem', 
          lineHeight: '2.441rem', 
          fontWeight: '600',
          fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
        },
        '.text-h5': { 
          fontSize: '1.563rem', 
          lineHeight: '1.953rem', 
          fontWeight: '500',
          fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
        },
        '.text-h6': { 
          fontSize: '1.250rem', 
          lineHeight: '1.563rem', 
          fontWeight: '500',
          fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
        },
        '.text-h7': { 
          fontSize: '1.000rem', 
          lineHeight: '1.25rem', 
          fontWeight: '400',
          fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
        }
      })
    }
  ],
}