frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,jsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        display: ['Inter', 'sans-serif'],
        body: ['Inter', 'sans-serif'],
        'body-lg': ['Inter'],
        'body-md': ['Inter'],
        'body-sm': ['Inter'],
        'headline-lg': ['Inter'],
        'headline-md': ['Inter'],
        'headline-sm': ['Inter'],
        'headline-lg-mobile': ['Inter'],
        'label-md': ['Inter'],
        'label-sm': ['Inter'],
      },
      colors: {
        // M3 Design tokens (landing page)
        'background': '#faf9f6',
        'on-error': '#ffffff',
        'on-tertiary-container': '#fffbff',
        'primary-container': '#6063ee',
        'secondary-fixed-dim': '#c5c6c8',
        'inverse-surface': '#2f312f',
        'outline': '#767586',
        'outline-variant': '#c7c4d7',
        'surface-container-low': '#f4f3f1',
        'on-primary-fixed-variant': '#2f2ebe',
        'on-secondary-container': '#606365',
        'inverse-primary': '#c0c1ff',
        'secondary': '#5c5f60',
        'tertiary-fixed-dim': '#ffb783',
        'on-tertiary-fixed': '#301400',
        'tertiary-fixed': '#ffdcc5',
        'on-primary-fixed': '#07006c',
        'secondary-fixed': '#e1e2e4',
        'on-secondary': '#ffffff',
        'on-surface': '#1a1c1a',
        'surface-dim': '#dbdad7',
        'on-secondary-fixed': '#191c1e',
        'tertiary': '#904900',
        'surface-container-highest': '#e3e2e0',
        'on-surface-variant': '#464554',
        'surface-bright': '#faf9f6',
        'primary': '#4648d4',
        'on-tertiary': '#ffffff',
        'surface': {
          DEFAULT: '#faf9f6',
          container: '#efeeeb',
          'container-low': '#f4f3f1',
          'container-high': '#e9e8e5',
          'container-highest': '#e3e2e0',
          'container-lowest': '#ffffff',
        },
        'on-background': '#1a1c1a',
        'primary-fixed': '#e1e0ff',
        'primary-fixed-dim': '#c0c1ff',
        'inverse-on-surface': '#f2f1ee',
        'error': '#ba1a1a',
        'surface-tint': '#494bd6',
        'on-error-container': '#93000a',
        'on-primary-container': '#fffbff',
        'secondary-container': '#dee0e2',
        'on-secondary-fixed-variant': '#444749',
        'on-primary': '#ffffff',
        'surface-variant': '#e3e2e0',
        'error-container': '#ffdad6',
        'on-tertiary-fixed-variant': '#703700',
        'tertiary-container': '#b55d00',

        // Inner pages (legacy tokens)
        brand: {
          DEFAULT: '#6b52c6',
          hover: '#5843a8',
          fg: '#ffffff',
          subtle: '#f3f0ff',
          ring: 'rgba(107, 82, 198, 0.15)',
          dim: '#8b7dd8',
        },
        success: { DEFAULT: '#22c55e', subtle: '#f0fdf4', strong: '#16a34a' },
        warning: { DEFAULT: '#f59e0b', subtle: '#fffbeb', strong: '#d97706' },
        danger:  { DEFAULT: '#ef4444', subtle: '#fef2f2', strong: '#dc2626' },
        info:    { DEFAULT: '#3b82f6', subtle: '#eff6ff', strong: '#2563eb' },
      },
      fontSize: {
        'display-lg': ['48px', { lineHeight: '56px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'headline-lg': ['48px', { lineHeight: '56px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'headline-lg-mobile': ['36px', { lineHeight: '44px', letterSpacing: '-0.01em', fontWeight: '700' }],
        'headline-md': ['32px', { lineHeight: '40px', letterSpacing: '-0.01em', fontWeight: '600' }],
        'headline-sm': ['20px', { lineHeight: '28px', fontWeight: '600' }],
        'body-lg':     ['18px', { lineHeight: '28px', fontWeight: '400' }],
        'body-md':     ['16px', { lineHeight: '24px', fontWeight: '400' }],
        'body-sm':     ['14px', { lineHeight: '20px', fontWeight: '400' }],
        'label-md':    ['14px', { lineHeight: '16px', letterSpacing: '0.01em', fontWeight: '500' }],
        'label-sm':    ['12px', { lineHeight: '16px', fontWeight: '600' }],
      },
      borderRadius: {
        sm: '0.125rem',
        DEFAULT: '0.25rem',
        md: '0.375rem',
        lg: '0.5rem',
        xl: '0.75rem',
        '2xl': '1rem',
      },
      boxShadow: {
        card: '0 4px 20px -2px rgba(0, 0, 0, 0.05)',
        elevated: '0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)',
        popover: '0 8px 24px -6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06)',
        'focus-ring': '0 0 0 3px rgba(107, 82, 198, 0.15)',
        'glow': '0 0 20px -8px rgba(107,82,198,0.3)',
        'nav': '0 4px 20px -2px rgba(0,0,0,0.05)',
        'cta': '0 10px 30px -4px rgba(70,72,212,0.3)',
      },
      spacing: {
        'unit': '8px',
        'margin-mobile': '16px',
        'container-max-width': '1280px',
        'nav-height': '64px',
        'gutter': '24px',
        'margin-desktop': '40px',
        '13': '3.25rem',
        '15': '3.75rem',
      },
      maxWidth: {
        'container-max-width': '1280px',
      },
      transitionTimingFunction: {
        'standard': 'cubic-bezier(0.2, 0, 0, 1)',
      },
    },
  },
  plugins: [],
}