/* eslint-env node */
/* global require */
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        // Cores da marca Decoda
        brand: {
          25: "#fef9f7",
          50: "#fef7ee",
          100: "#fdebd3",
          200: "#fbd3a5",
          300: "#FFB550",
          400: "#FF8B49",
          500: "#FE0002", // Cor principal
          600: "#de4e32",
          700: "#c73e2b",
          800: "#9f3429",
          900: "#812d25",
          950: "#461412",
        },
        // Gradiente cores para jogos
        game: {
          primary: "#ED1B2F",
          secondary: "#ED0973",
          tertiary: "#B624C0",
          quaternary: "#9333EA",
        },
        green: {
          100: "#D5DF50",
          500: "#009247",
        },
        gray: {
          100: "#EAEEF5",
          900: "#242527",
        },
        /* variables-driven helpers */
        'primary-start': 'var(--primary-gradient-start)',
        'primary-end': 'var(--primary-gradient-end)',
        'action-green': 'var(--action-green)',
      },
      backgroundImage: {
        'gradient-primary': 'linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end))',
      },
      fontFamily: {        sans: ["Lato", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
        title: ["Barlow Semi Condensed", "sans-serif"],
      },
      animation: {
        "bounce-slow": "bounce 2s infinite",
        "pulse-slow": "pulse 3s infinite",
        "spin-slow": "spin 3s linear infinite",
        "hero-vert-scroll-infinite":
          "hero-vert-scroll-infinite 30s linear infinite",
        "hero-vert-scroll-infinite-reverse":
          "hero-vert-scroll-infinite-reverse 30s linear infinite",
        "hero-vert-scroll-infinite-x":
          "hero-vert-scroll-infinite-x 30s linear infinite",
        "hero-vert-scroll-infinite-x-reverse":
          "hero-vert-scroll-infinite-x-reverse 30s linear infinite",
      },
      keyframes: {
        "hero-vert-scroll-infinite": {
          "0%": { transform: "translateY(0)" },
          "100%": { transform: "translateY(-50%)" },
        },
        "hero-vert-scroll-infinite-reverse": {
          "0%": { transform: "translateY(-50%)" },
          "100%": { transform: "translateY(0)" },
        },
        "hero-vert-scroll-infinite-x": {
          "0%": { transform: "translateX(0)" },
          "100%": { transform: "translateX(-50%)" },
        },
        "hero-vert-scroll-infinite-x-reverse": {
          "0%": { transform: "translateX(-50%)" },
          "100%": { transform: "translateX(0)" },
        },
      },
      backdropBlur: {
        xs: "2px",
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};