/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './app/View/**/*.php',
    './app/Components/**/*.php',
    './public/assets/js/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        carbon: '#0a0a0b',
        charcoal: '#121214',
        smoke: {
          50: '#f4f4f5',
          100: '#e4e4e7',
          400: '#a1a1aa',
          500: '#71717a',
          600: '#52525b',
          800: '#27272a',
          900: '#18181b',
        },
        silver: {
          300: '#d4d4d8',
          400: '#a1a1aa',
          500: '#71717a',
        },
        electric: {
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
        },
        violet: {
          400: '#a78bfa',
          500: '#8b5cf6',
        },
        cyan: {
          300: '#67e8f9',
          400: '#22d3ee',
        },
      },
      fontFamily: {
        sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
        display: ['"Instrument Serif"', 'Georgia', 'serif'],
        hero: ['Inter', 'system-ui', 'sans-serif'],
      },
      transitionTimingFunction: {
        outexpo: 'cubic-bezier(0.16, 1, 0.3, 1)',
        inease: 'cubic-bezier(0.4, 0, 0.2, 1)',
      },
      boxShadow: {
        glow: '0 0 60px rgba(14, 165, 233, 0.12)',
        panel: '0 20px 80px rgba(0,0,0,0.45)',
      },
      backgroundImage: {
        'noise-soft':
          "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E\")",
      },
    },
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container-shell': {
          '@apply mx-auto w-full max-w-7xl px-6 md:px-10': {},
        },
        '.section-spacing': {
          '@apply py-20 md:py-28': {},
        },
        '.cinematic-heading': {
          '@apply font-display text-4xl leading-[1.05] tracking-tight text-white md:text-6xl lg:text-7xl': {},
        },
        '.muted-label': {
          '@apply text-[0.65rem] font-medium uppercase tracking-[0.35em] text-silver-500': {},
        },
        '.magnetic-button': {
          '@apply transition-transform duration-300 ease-outexpo will-change-transform': {},
        },
        '.glass-panel': {
          '@apply border border-white/10 bg-white/[0.03] shadow-panel backdrop-blur-md': {},
        },
        '.media-card': {
          '@apply overflow-hidden rounded-2xl': {},
        },
      });
    },
  ],
};
