import type { Config } from 'tailwindcss';
import plugin from 'tailwindcss/plugin';

// Design system: "Arcade HUD" — a glass, dark-first gaming dashboard language
// drawn from in-game stat overlays, not generic SaaS glassmorphism.
// See README.md > Design System for the full rationale.
const config: Config = {
  darkMode: 'class',
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        ink: {
          DEFAULT: '#0B0E14', // primary dark background — blue-black, not flat #000
          soft: '#12161F', // glass panel base
          line: '#1E2430', // hairline borders on dark
        },
        paper: {
          DEFAULT: '#F6F7FB', // light-mode background
          soft: '#FFFFFF',
          line: '#E2E5EE',
        },
        mist: '#E8EAF0', // primary text on dark
        haze: {
          DEFAULT: '#8B93A7', // secondary text on dark
          deep: '#4A5164', // secondary text on light
        },
        signal: {
          DEFAULT: '#5EEAD4', // cool accent: links, active states, "online" indicator
          dim: '#2DD4BF',
        },
        ember: {
          DEFAULT: '#FF7A45', // warm accent: primary CTAs, "play" energy
          dim: '#E85D2E',
        },
        gold: '#F5C451', // ratings / achievement accent only — never for chrome
      },
      fontFamily: {
        display: ['var(--font-display)', 'sans-serif'],
        body: ['var(--font-body)', 'sans-serif'],
        mono: ['var(--font-mono)', 'monospace'],
      },
      backgroundImage: {
        'grid-glow':
          'radial-gradient(circle at 20% -10%, rgba(94,234,212,0.15), transparent 40%), radial-gradient(circle at 90% 10%, rgba(255,122,69,0.12), transparent 35%)',
      },
      boxShadow: {
        glass: '0 8px 32px rgba(0,0,0,0.28)',
        'glass-sm': '0 2px 12px rgba(0,0,0,0.2)',
        signal: '0 0 0 1px rgba(94,234,212,0.4), 0 0 24px rgba(94,234,212,0.15)',
      },
      animation: {
        'fade-up': 'fade-up 0.5s ease-out both',
        'ring-fill': 'ring-fill 1s ease-out both',
      },
      keyframes: {
        'fade-up': {
          '0%': { opacity: '0', transform: 'translateY(8px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        'ring-fill': {
          '0%': { strokeDashoffset: 'var(--ring-empty)' },
          '100%': { strokeDashoffset: 'var(--ring-fill)' },
        },
      },
    },
  },
  plugins: [
    // Small local plugin: clip-path utilities for the notched-panel signature.
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.clip-notch': {
          clipPath:
            'polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%)',
        },
        '.clip-notch-sm': {
          clipPath: 'polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%)',
        },
      });
    }),
  ],
};

export default config;
