/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './app/components/**/*.{js,vue,ts}',
    './app/layouts/**/*.vue',
    './app/pages/**/*.vue',
    './app/plugins/**/*.{js,ts}',
    './app/app.vue',
  ],
  theme: {
    extend: {
      fontFamily: {
        mono: ['"JetBrains Mono"', '"Fira Code"', 'ui-monospace', 'monospace'],
      },
      colors: {
        kestrel: {
          'bg': '#060b14',
          'surface': '#0d1424',
          'surface-elevated': '#1e293b',
          'surface-hover': '#111a2e',
          'border': '#1a2744',
          'text': '#b8c9e0',
          'text-bright': '#e2e8f0',
          'muted': '#5c6f8a',
          'accent': '#22c9c9',
          'accent-dim': '#0f3d3d',
          'glow': 'rgba(34, 201, 201, 0.35)',
        },
      },
      boxShadow: {
        'glow-sm': '0 0 12px -2px rgba(34, 201, 201, 0.2)',
        'glow': '0 0 20px -4px rgba(34, 201, 201, 0.3)',
        'glow-md': '0 0 24px -2px rgba(34, 201, 201, 0.25)',
        'glow-border': 'inset 0 0 20px -8px rgba(34, 201, 201, 0.15)',
        'glow-header': '0 0 20px -4px rgba(34, 201, 201, 0.15)',
        'glow-dropdown': '0 4px 12px -2px rgba(34, 201, 201, 0.15)',
        'glow-panel': '-8px 0 24px -4px rgba(34, 201, 201, 0.12)',
        'glow-modal': '0 0 32px -8px rgba(34, 201, 201, 0.25)',
        'glow-card': '0 0 20px -4px rgba(34, 201, 201, 0.15)',
        'glow-context': '0 0 20px -4px rgba(34, 201, 201, 0.2)',
        'glow-inset-video': 'inset 0 0 20px -8px rgba(34, 201, 201, 0.1)',
        'border-header': '0 1px 0 0 rgba(34, 201, 201, 0.08)',
        'elevated': '0 4px 12px rgba(0, 0, 0, 0.4)',
      },
      textShadow: {
        'glow': '0 0 12px rgba(34, 201, 201, 0.4)',
        'glow-sm': '0 0 8px rgba(34, 201, 201, 0.25)',
        'glow-md': '0 0 12px rgba(34, 201, 201, 0.35)',
      },
    },
  },
  plugins: [
    function ({ addUtilities, theme }) {
      addUtilities({
        '.text-shadow-glow-sm': { textShadow: theme('textShadow.glow-sm') },
        '.text-shadow-glow': { textShadow: theme('textShadow.glow') },
        '.text-shadow-glow-md': { textShadow: theme('textShadow.glow-md') },
      })
    },
  ],
}