tailwind.config.js

import typography from '@tailwindcss/typography'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js}'],
  theme: {
    extend: {
      // Semantic names for the palette defined as CSS variables in assets/main.css.
      // surface = --bg-primary, card = --bg-secondary, elevated = --bg-tertiary,
      // line = --border, ink = --text-primary, muted = --text-secondary, faint = --text-muted.
      colors: {
        surface: '#0f1117',
        card: '#1a1d27',
        elevated: '#242736',
        line: '#2e3147',
        accent: {
          DEFAULT: '#6c63ff',
          hover: '#5a52d5',
          glow: 'rgba(108, 99, 255, 0.15)',
        },
        success: '#22c55e',
        error: '#ef4444',
        warning: '#f59e0b',
        ink: '#e8eaf0',
        muted: '#8b90a7',
        faint: '#4a4f6a',
        xp: '#f59e0b',
        badge: '#a78bfa',
      },
      borderRadius: {
        card: '12px',
        btn: '8px',
        input: '6px',
      },
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
      },
      boxShadow: {
        glow: '0 8px 24px -8px rgba(108, 99, 255, 0.35)',
        'glow-sm': '0 0 0 1px rgba(108, 99, 255, 0.25), 0 4px 16px -6px rgba(108, 99, 255, 0.3)',
      },
      transitionDuration: {
        DEFAULT: '200ms',
      },
      keyframes: {
        'fade-in': {
          from: { opacity: '0' },
          to: { opacity: '1' },
        },
        'fade-up': {
          from: { opacity: '0', transform: 'translateY(8px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        'slide-up': {
          from: { opacity: '0', transform: 'translateY(24px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        'pulse-glow': {
          '0%, 100%': { boxShadow: '0 0 0 0 rgba(245, 158, 11, 0.35)' },
          '50%': { boxShadow: '0 0 0 6px rgba(245, 158, 11, 0)' },
        },
      },
      animation: {
        'fade-in': 'fade-in 200ms ease-out both',
        'fade-up': 'fade-up 250ms ease-out both',
        'slide-up': 'slide-up 350ms ease-out both',
        'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
      },
    },
  },
  plugins: [typography],
}