vidreview/src/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './lib/**/*.{js,ts,jsx,tsx}',
    '../packages/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
      colors: {
        // ── Semantic tokens (Tailwind references these) ──────────────────
        primary: {
          DEFAULT: '#2563EB',
          foreground: '#FFFFFF',
        },
        // ── Brand / Indigo palette ─────────────────────────────────────
        brand: {
          50:  '#EEF2FF',
          100: '#E0E7FF',
          200: '#C7D2FE',
          300: '#A5B4FC',
          400: '#818CF8',
          500: '#6366F1',
          600: '#4F46E5',
          700: '#4338CA',
          800: '#3730A3',
          900: '#312E81',
        },
        // ── Surface / neutral slate palette ─────────────────────────────
        surface: {
          DEFAULT: '#0F1117',
          50:  '#F8FAFC',
          100: '#F1F5F9',
          200: '#E2E8F0',
          300: '#CBD5E1',
          400: '#94A3B8',
          500: '#64748B',
          600: '#475569',
          700: '#334155',
          800: '#1E293B',
          900: '#0F172A',
          950: '#0A0D14',
        },
        // ── Ink / text colors ─────────────────────────────────────────
        ink: {
          DEFAULT: '#F1F5F9',
          50:  '#F8FAFC',
          100: '#F1F5F9',
          200: '#E2E8F0',
          300: '#CBD5E1',
          400: '#94A3B8',
          500: '#64748B',
          600: '#475569',
          700: '#334155',
          800: '#1E293B',
          900: '#0F172A',
        },
        // ── Status palette ─────────────────────────────────────────────
        success: '#22C55E',
        warning: '#F59E0B',
        danger:  '#EF4444',
        info:    '#3B82F6',
      },
      backgroundColor: {
        surface: '#0F1117',
        'surface-50': '#F8FAFC',
        'surface-100': '#F1F5F9',
        'surface-200': '#E2E8F0',
        'surface-300': '#CBD5E1',
        'surface-400': '#94A3B8',
        'surface-500': '#64748B',
        'surface-600': '#475569',
        'surface-700': '#334155',
        'surface-800': '#1E293B',
        'surface-900': '#0F172A',
        'surface-950': '#0A0D14',
      },
      textColor: {
        ink: '#F1F5F9',
        'ink-50':  '#F8FAFC',
        'ink-100': '#F1F5F9',
        'ink-200': '#E2E8F0',
        'ink-300': '#CBD5E1',
        'ink-400': '#94A3B8',
        'ink-500': '#64748B',
        'ink-600': '#475569',
        'ink-700': '#334155',
        'ink-800': '#1E293B',
        'ink-900': '#0F172A',
      },
      borderColor: {
        'surface-DEFAULT': 'rgba(255,255,255,0.06)',
        'surface-100':     'rgba(255,255,255,0.08)',
        'surface-200':    'rgba(255,255,255,0.12)',
        'surface-300':    'rgba(255,255,255,0.18)',
        'surface-border': 'rgba(255,255,255,0.10)',
      },
      boxShadow: {
        'card':      '0 0 0 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.40)',
        'card-hover':'0 0 0 1px rgba(99,102,241,0.40), 0 4px 16px rgba(0,0,0,0.50)',
        'panel':     '0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.60)',
        'btn-click': '0 1px 2px rgba(0,0,0,0.4) inset',
        'glow-brand': '0 0 20px rgba(99,102,241,0.35)',
        'glow-success': '0 0 16px rgba(34,197,94,0.40)',
        'glow-danger':  '0 0 16px rgba(239,68,68,0.40)',
        'glow-warning': '0 0 16px rgba(245,158,11,0.40)',
      },
      animation: {
        'fade-in':   'fadeIn 0.2s ease-out',
        'slide-up':  'slideUp 0.3s ease-out',
        'scale-in':  'scaleIn 0.15s ease-out',
        'pulse-glow': 'pulseGlow 2s ease-in-out infinite',
        'shimmer':   'shimmer 1.8s linear infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(8px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        scaleIn: {
          '0%': { opacity: '0', transform: 'scale(0.95)' },
          '100%': { opacity: '1', transform: 'scale(1)' },
        },
        pulseGlow: {
          '0%, 100%': { opacity: '0.4' },
          '50%':       { opacity: '1' },
        },
        shimmer: {
          '0%':   { backgroundPosition: '-200% 0' },
          '100%': { backgroundPosition:  '200% 0' },
        },
      },
      borderRadius: {
        xl:  '12px',
        '2xl': '16px',
        '3xl': '24px',
        '4xl': '32px',
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      backdropBlur: {
        xs: '2px',
      },
      transitionTimingFunction: {
        'spring': 'cubic-bezier(0.16, 1, 0.3, 1)',
      },
    },
  },
  plugins: [],
};