import type { Config } from 'tailwindcss';

export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Instrument Sans"', 'system-ui', 'sans-serif'],
        display: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
        mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace'],
      },
      colors: {
        // Horizon theme: cool space neutrals — replaces Tailwind's gray
        // throughout the app, since components reference gray-* directly.
        gray: {
          50: '#f4f5f8',
          100: '#edeef3',
          200: '#dde0e8',
          300: '#bcc1cd',
          400: '#9aa0b0',
          500: '#6e7484',
          600: '#4d5363',
          700: '#373c49',
          800: '#232733',
          900: '#14161f',
          950: '#0a0b11',
        },
        // Atmosphere-rim cyan accent — every accent reference
        // (text-blue-*, bg-blue-*, ring-blue-*) lights up in the brand color.
        // Validated against the dark surface (dataviz six checks).
        blue: {
          50: '#ecfbfe',
          100: '#d4f4fa',
          200: '#ade8f2',
          300: '#6ec9db',
          400: '#4ab3c8',
          500: '#2f9db2',
          600: '#23808f',
          700: '#1d6675',
          800: '#1a525e',
          900: '#17434e',
          950: '#0a2b33',
        },
        // Positive/up shares the cyan family (mockup: one "up" color, no green).
        emerald: {
          50: '#ecfbfe',
          100: '#d4f4fa',
          200: '#ade8f2',
          300: '#6ec9db',
          400: '#4ab3c8',
          500: '#2f9db2',
          600: '#23808f',
          700: '#1d6675',
          800: '#1a525e',
          900: '#17434e',
          950: '#0a2b33',
        },
        // Negative/down: muted rose (Mars ember stays reserved for atmosphere).
        red: {
          50: '#fdf1ef',
          100: '#fbe0dc',
          200: '#f6c2ba',
          300: '#f0a094',
          400: '#ea8271',
          500: '#e36a58',
          600: '#c95441',
          700: '#a84334',
          800: '#86382c',
          900: '#6e3128',
          950: '#3b1712',
        },
        surface: {
          DEFAULT: 'rgba(255, 255, 255, 0.04)',
          hover: 'rgba(255, 255, 255, 0.07)',
          active: 'rgba(255, 255, 255, 0.1)',
          border: 'rgba(226, 231, 245, 0.09)',
        },
      },
      backdropBlur: {
        glass: '16px',
      },
      animation: {
        'glow-pulse': 'glow-pulse 3s ease-in-out infinite',
        'fade-in': 'fade-in 0.3s ease-out',
        'slide-up': 'slide-up 0.4s ease-out',
        'signal-pulse': 'signal-pulse 2.4s ease-in-out infinite',
      },
      keyframes: {
        'glow-pulse': {
          '0%, 100%': { opacity: '0.4' },
          '50%': { opacity: '0.8' },
        },
        'fade-in': {
          from: { opacity: '0' },
          to: { opacity: '1' },
        },
        'slide-up': {
          from: { opacity: '0', transform: 'translateY(12px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        'signal-pulse': {
          '0%, 100%': { opacity: '1', transform: 'scale(1)' },
          '50%': { opacity: '0.35', transform: 'scale(0.8)' },
        },
      },
    },
  },
  plugins: [],
} satisfies Config;