export default {
  content: ['./index.html', './src/**/*.{vue,js}'],
  // 'class' (y no 'media') para que el toggle del header pueda ganarle al
  // sistema operativo. La clase la pone lib/tema.js antes de montar la app.
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Mismo verde de marca que ya usa el widget embebible de uMind.
        brand: {
          DEFAULT: '#8eb02f',
          dark: '#719026',
          light: '#a8c94f',
        },
        // Superficies y texto salen de variables CSS (ver style.css) para no
        // repetir el par claro/oscuro en cada elemento.
        superficie: 'rgb(var(--superficie) / <alpha-value>)',
        elevado: 'rgb(var(--elevado) / <alpha-value>)',
        borde: 'rgb(var(--borde) / <alpha-value>)',
        texto: 'rgb(var(--texto) / <alpha-value>)',
        tenue: 'rgb(var(--tenue) / <alpha-value>)',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'Segoe UI', 'sans-serif'],
      },
      keyframes: {
        aparecer: {
          '0%': { opacity: '0', transform: 'translateY(4px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        escalar: {
          '0%': { opacity: '0', transform: 'scale(.97)' },
          '100%': { opacity: '1', transform: 'scale(1)' },
        },
      },
      animation: {
        aparecer: 'aparecer .2s ease-out',
        escalar: 'escalar .15s ease-out',
      },
    },
  },
  plugins: [],
}