SEEN/frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
        display: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        // Surface Architecture
        'surface-dim': 'rgb(var(--color-surface-dim) / <alpha-value>)',
        'surface': 'rgb(var(--color-surface) / <alpha-value>)',
        'surface-bright': 'rgb(var(--color-surface-bright) / <alpha-value>)',
        'surface-lowest': 'rgb(var(--color-surface-container-lowest) / <alpha-value>)',
        'surface-low': 'rgb(var(--color-surface-container-low) / <alpha-value>)',
        'surface-container': 'rgb(var(--color-surface-container) / <alpha-value>)',
        'surface-high': 'rgb(var(--color-surface-container-high) / <alpha-value>)',
        'surface-highest': 'rgb(var(--color-surface-container-highest) / <alpha-value>)',
        // Legacy mappings
        bg: 'rgb(var(--color-bg) / <alpha-value>)',
        fg: 'rgb(var(--color-fg) / <alpha-value>)',
        muted: 'rgb(var(--color-muted) / <alpha-value>)',
        'muted-fg': 'rgb(var(--color-muted-fg) / <alpha-value>)',
        card: 'rgb(var(--color-card) / <alpha-value>)',
        border: 'rgb(var(--color-border) / <alpha-value>)',
        // Primary
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
        'primary-container': 'rgb(var(--color-primary-container) / <alpha-value>)',
        'primary-fixed': 'rgb(var(--color-primary-fixed) / <alpha-value>)',
        'primary-fixed-dim': 'rgb(var(--color-primary-fixed-dim) / <alpha-value>)',
        'on-primary': 'rgb(var(--color-on-primary) / <alpha-value>)',
        'on-primary-container': 'rgb(var(--color-on-primary-container) / <alpha-value>)',
        // Accent alias
        accent: 'rgb(var(--color-accent) / <alpha-value>)',
        // Secondary
        secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
        'secondary-container': 'rgb(var(--color-secondary-container) / <alpha-value>)',
        'secondary-fixed': 'rgb(var(--color-secondary-fixed) / <alpha-value>)',
        'secondary-fixed-dim': 'rgb(var(--color-secondary-fixed-dim) / <alpha-value>)',
        'on-secondary': 'rgb(var(--color-on-secondary) / <alpha-value>)',
        'on-secondary-container': 'rgb(var(--color-on-secondary-container) / <alpha-value>)',
        // Tertiary
        tertiary: 'rgb(var(--color-tertiary) / <alpha-value>)',
        'tertiary-container': 'rgb(var(--color-tertiary-container) / <alpha-value>)',
        // Semantic
        success: 'rgb(var(--color-success) / <alpha-value>)',
        warning: 'rgb(var(--color-warning) / <alpha-value>)',
        danger: 'rgb(var(--color-danger) / <alpha-value>)',
        'on-danger': 'rgb(var(--color-on-danger) / <alpha-value>)',
        // Outlines
        outline: 'rgb(var(--color-outline) / <alpha-value>)',
        'outline-variant': 'rgb(var(--color-outline-variant) / <alpha-value>)',
        'on-surface-variant': 'rgb(var(--color-on-surface-variant) / <alpha-value>)',
        // Inverse
        'inverse-surface': 'rgb(var(--color-inverse-surface) / <alpha-value>)',
        'inverse-on-surface': 'rgb(var(--color-inverse-on-surface) / <alpha-value>)',
        'inverse-primary': 'rgb(var(--color-inverse-primary) / <alpha-value>)',
        // Tint
        'surface-tint': 'rgb(var(--color-surface-tint) / <alpha-value>)',
      },
      boxShadow: {
        brutal: '8px 8px 0 rgb(var(--color-primary))',
        'brutal-sm': '4px 4px 0 rgb(var(--color-primary))',
        'brutal-lg': '12px 12px 0 rgb(var(--color-primary))',
        'brutal-hover': '12px 12px 0 rgb(var(--color-primary))',
        'brutal-outline': '8px 8px 0 rgb(var(--color-outline))',
        none: 'none',
      },
      borderRadius: {
        none: '0',
        DEFAULT: '0',
      },
      borderWidth: {
        DEFAULT: '3px',
        0: '0',
        2: '2px',
        3: '3px',
        4: '4px',
        6: '6px',
        8: '8px',
      },
      keyframes: {
        'brutal-appear': {
          '0%': { opacity: 0 },
          '100%': { opacity: 1 },
        },
        'brutal-scale': {
          '0%': { transform: 'scale(0.9)' },
          '50%': { transform: 'scale(1.05)' },
          '100%': { transform: 'scale(1)' },
        },
        'glitch-anim': {
          '0%': { clip: 'rect(42px, 9999px, 44px, 0)' },
          '5%': { clip: 'rect(12px, 9999px, 59px, 0)' },
          '10%': { clip: 'rect(48px, 9999px, 29px, 0)' },
          '15%': { clip: 'rect(42px, 9999px, 73px, 0)' },
          '20%': { clip: 'rect(63px, 9999px, 27px, 0)' },
          '100%': { clip: 'rect(4px, 9999px, 91px, 0)' },
        },
        'flicker': {
          '0%, 100%': { opacity: 1 },
          '42%': { opacity: 0 },
          '43%': { opacity: 1 },
          '48%': { opacity: 0 },
          '49%': { opacity: 1 },
        },
        'slide-brutal': {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' },
        },
      },
      animation: {
        'brutal-appear': 'brutal-appear 0.1s steps(1) both',
        'brutal-scale': 'brutal-scale 0.1s steps(2) both',
        'glitch': 'glitch-anim 3s infinite linear alternate-reverse',
        'flicker': 'flicker 5s infinite',
        'slide-brutal': 'slide-brutal 0.2s steps(3) both',
      },
      backgroundImage: {
        'gradient-primary': 'linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary)) 100%)',
        'gradient-secondary': 'linear-gradient(135deg, rgb(var(--color-secondary)) 0%, rgb(var(--color-secondary)) 100%)',
        'gradient-mesh': 'repeating-linear-gradient(45deg, transparent, transparent 10px, rgb(var(--color-primary) / 0.03) 10px, rgb(var(--color-primary) / 0.03) 20px)',
        'brutal-stripes': 'repeating-linear-gradient(45deg, transparent, transparent 20px, rgb(var(--color-primary) / 0.05) 20px, rgb(var(--color-primary) / 0.05) 40px)',
      },
    },
  },
  plugins: [],
}