import type { Config } from "tailwindcss";

/**
 * Design system de Gotagig — claro y a la vanguardia.
 * Roles: fondo blanco · acento primario TEAL · azul Boracurve para acción principal y zonas hero.
 * Los tokens semánticos permiten recolorear en un solo lugar.
 */
const config: Config = {
  darkMode: "class",
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        bg: {
          DEFAULT: "#ffffff",
          soft: "#f8fafc",
          card: "#ffffff",
          elev: "#f1f5f9",
        },
        ink: {
          DEFAULT: "#0b1220",
          soft: "#475569",
          mute: "#64748b",
        },
        line: "#e2e8f0",
        // Acento primario — teal
        accent: {
          DEFAULT: "#06b6d4",
          soft: "#5eead4",
          bright: "#22d3ee",
          deep: "#0891b2",
          tint: "#ecfeff",
          border: "#a5f3fc",
        },
        // Azul Boracurve — acción principal y zonas hero
        blue: {
          DEFAULT: "#2563eb",
          light: "#3b82f6",
          deep: "#1d4ed8",
          soft: "#93c5fd",
          tint: "#eff6ff",
        },
        navy: {
          DEFAULT: "#0b1a33",
          void: "#05090f", // fondo del hero: mas profundo que navy para el degrade a negro
        },
        success: "#16a34a",
        star: "#f59e0b",
      },
      fontFamily: {
        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
        music: ['"Segoe UI Symbol"', '"Noto Music"', "serif"],
      },
      borderRadius: { xl: "1rem", "2xl": "1.25rem" },
      boxShadow: {
        glow: "0 10px 30px -8px rgba(6, 182, 212, 0.4)",
        "glow-blue": "0 10px 30px -8px rgba(37, 99, 235, 0.45)",
        soft: "0 6px 24px -12px rgba(2, 32, 71, 0.18)",
      },
      keyframes: {
        rise: {
          "0%": { transform: "translateY(105%)" },
          "100%": { transform: "none" },
        },
        "fade-in": {
          "0%": { opacity: "0", transform: "translateY(8px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        "pulse-ring": {
          "0%": { transform: "scale(0.9)", opacity: "0.6" },
          "100%": { transform: "scale(2.1)", opacity: "0" },
        },
      },
      animation: {
        "fade-in": "fade-in 0.4s ease-out both",
        "pulse-ring": "pulse-ring 1.9s ease-out infinite",
        // Entrada del hero: el titulo sube por linea, el resto aparece escalonado detras.
        rise: "rise 0.95s cubic-bezier(0.16,1,0.3,1) both",
        "rise-late": "rise 0.95s cubic-bezier(0.16,1,0.3,1) 0.09s both",
        "fade-in-slow": "fade-in 0.8s ease-out 0.5s both",
        "fade-in-slower": "fade-in 0.8s ease-out 0.68s both",
      },
    },
  },
  plugins: [],
};

export default config;