tailwind.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        // Light mode
        bg: "var(--bg)",
        "bg-2": "var(--bg2)",
        "bg-3": "var(--bg3)",
        border: "var(--border)",
        "border-2": "var(--border2)",
        text: "var(--text)",
        "text-2": "var(--text2)",
        "text-3": "var(--text3)",
        accent: "var(--accent)",
        "accent-2": "var(--accent2)",
        blue: "var(--blue)",
        "blue-2": "var(--blue2)",
        "blue-glow": "var(--blue-glow)",
        success: "var(--success)",
        error: "var(--error)",
        warning: "var(--warning)",

        // Mascot chicken
        "chk-body": "var(--chk-body)",
        "chk-shadow": "var(--chk-shadow)",
        "chk-comb": "var(--chk-comb)",
        "chk-beak": "var(--chk-beak)",
        "chk-legs": "var(--chk-legs)",
        "chk-eyes": "var(--chk-eyes)",
        "chk-border": "var(--chk-border)",

        // Chip
        "chip-bg": "var(--chipbg)",
        "chip-border": "var(--chipborder)",
        "chip-sel": "var(--chipsel)",
        "chip-border-sel": "var(--chipbordersel)",
        "chip-sel-text": "var(--chipseltext)",

        // Dot
        dot: "var(--dot)",
        "dot-done": "var(--dotdone)",

        // Side panel
        "side-bg": "var(--sidebg)",

        // Overlay
        "overlay-bg": "var(--overlay-bg)",

        // Tints
        "blue-tint": "var(--blue-tint)",
        "blue-tint-2": "var(--blue-tint2)",
        "yellow-tint": "var(--yellow-tint)",
        "yellow-tint-2": "var(--yellow-tint2)",
        "brand-yellow": "var(--brand-yellow)",

        // Atmosphere
        "math-float": "var(--mathfloat)",
      },
      fontFamily: {
        grotesk: ["Space Grotesk", "Nunito", "sans-serif"],
        mono: ["Space Mono", "monospace"],
      },
      fontSize: {
        xs: ["11px", { lineHeight: "1" }],
        sm: ["13px", { lineHeight: "1" }],
        base: ["15px", { lineHeight: "1.5" }],
        lg: ["16px", { lineHeight: "1.5" }],
      },
      letterSpacing: {
        tighter: "-0.02em",
        tight: "0.02em",
        normal: "0",
        mono: "0.13em",
        "mono-sm": "0.04em",
      },
      borderRadius: {
        xs: "8px",
        sm: "10px",
        md: "14px",
        lg: "20px",
        full: "50%",
      },
      boxShadow: {
        sm: "0 4px 24px rgba(0, 0, 0, 0.07)",
        md: "var(--shadow)",
        "dark-lg": "0 4px 32px rgba(0, 0, 0, 0.4)",
        "btn-cta": "0 5px 0 var(--blue2), 0 6px 16px var(--blue-glow)",
        "btn-cta-hover": "0 7px 0 #1e3a8a, 0 10px 22px var(--blue-glow)",
        "btn-cta-active": "0 2px 0 var(--blue2), 0 2px 8px var(--blue-glow)",
        "btn-ghost": "0 4px 0 var(--border2)",
        "btn-ghost-hover": "0 6px 0 var(--border2)",
        "btn-ghost-active": "0 1px 0 var(--border2)",
      },
      keyframes: {
        stepIn: {
          from: { opacity: "0", transform: "translateY(14px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
        // Chicken animations
        "chk-bob": {
          "0%, 100%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-5px)" },
        },
        "chk-happy-bob": {
          "0%, 100%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-10px)" },
        },
        "chk-thinking-bob": {
          "0%, 100%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(2px)" },
        },
        "chk-blink": {
          "0%, 18%": { transform: "scaleY(1)" },
          "20%": { transform: "scaleY(0.06)" },
          "22%": { transform: "scaleY(1)" },
          "24%": { transform: "scaleY(0.06)" },
          "26%, 100%": { transform: "scaleY(1)" },
        },
        "chk-thinking-eyes": {
          "0%, 100%": { transform: "scaleY(1)" },
          "50%": { transform: "scaleY(0.1)" },
        },
        "chk-wave": {
          "0%": { transform: "rotate(0deg) translateY(0px)" },
          "8%": { transform: "rotate(-25deg) translateY(-4px)" },
          "18%": { transform: "rotate(-10deg) translateY(-1px)" },
          "28%": { transform: "rotate(-28deg) translateY(-5px)" },
          "38%": { transform: "rotate(-8deg) translateY(-1px)" },
          "48%": { transform: "rotate(-22deg) translateY(-3px)" },
          "60%": { transform: "rotate(-5deg) translateY(0px)" },
          "70%, 100%": { transform: "rotate(0deg) translateY(0px)" },
        },
        "chk-sway": {
          "0%, 100%": { transform: "rotate(0deg)" },
          "50%": { transform: "rotate(5deg)" },
        },
        "chk-wattle": {
          "0%, 100%": { transform: "rotate(0deg) translateX(0)" },
          "30%": { transform: "rotate(5deg) translateX(1px)" },
          "70%": { transform: "rotate(-4deg) translateX(-1px)" },
        },
        "chk-beak-talk": {
          "0%, 100%": { transform: "scaleY(1) translateY(0)" },
          "50%": { transform: "scaleY(1.5) translateY(1px)" },
        },
        "chk-celebrate": {
          "0%, 100%": { transform: "translateY(0)" },
          "20%": { transform: "translateY(-24px)" },
          "40%": { transform: "translateY(-10px)" },
          "60%": { transform: "translateY(-18px)" },
          "80%": { transform: "translateY(-5px)" },
        },
        // Confetti
        cpFly: {
          "0%": {
            transform: "translate(-50%,-50%) scale(1)",
            opacity: "1",
          },
          "100%": {
            transform:
              "translate(var(--tx), var(--ty)) scale(0.3) rotate(var(--rot))",
            opacity: "0",
          },
        },
      },
      animation: {
        "step-in": "stepIn 0.3s cubic-bezier(.22, 1, .36, 1) both",
        "chk-bob": "chk-bob 0.8s ease-in-out infinite",
        "chk-happy-bob": "chk-happy-bob 0.8s ease-in-out infinite",
        "chk-thinking-bob": "chk-thinking-bob 0.8s ease-in-out infinite",
        "chk-blink": "chk-blink 4s ease-in-out infinite",
        "chk-thinking-eyes": "chk-thinking-eyes 1s ease-in-out infinite",
        "chk-wave": "chk-wave 1.2s ease-in-out infinite",
        "chk-sway": "chk-sway 2s ease-in-out infinite",
        "chk-wattle": "chk-wattle 0.6s ease-in-out infinite",
        "chk-beak-talk": "chk-beak-talk 0.4s ease-in-out infinite",
        "chk-celebrate": "chk-celebrate 0.6s ease-out",
        confetti: "cpFly 0.9s cubic-bezier(.36,.07,.19,.97) forwards",
      },
      transitionDuration: {
        250: "250ms",
      },
      transitionTimingFunction: {
        duolingo: "cubic-bezier(0.34, 1.56, 0.64, 1)",
      },
    },
  },
  plugins: [
    function ({ addBase, addComponents, addUtilities, theme }) {
      // Base styles
      addBase({
        html: {
          scrollBehavior: "smooth",
        },
        "html, body, #root": {
          minHeight: "100dvh",
        },
        body: {
          fontFamily: theme("fontFamily.grotesk"),
          backgroundColor: theme("colors.bg-2"),
          color: theme("colors.text"),
        },
        "::view-transition-old(root), ::view-transition-new(root)": {
          animation: "none",
          mixBlendMode: "normal",
        },
      });

      // Components
      addComponents({
        // CTA Button (Duolingo-style squircle)
        ".btn-cta": {
          "@apply inline-flex items-center justify-center gap-2 px-[26px] py-[13px] rounded-md":
            {},
          "border-radius": "14px",
          backgroundColor: theme("colors.blue"),
          color: "#ffffff",
          fontFamily: theme("fontFamily.grotesk"),
          fontSize: "14px",
          fontWeight: "700",
          letterSpacing: theme("letterSpacing.mono-sm"),
          textTransform: "uppercase",
          boxShadow: theme("boxShadow.btn-cta"),
          "@apply transition-all duration-150 cursor-pointer border-none outline-none select-none":
            {},

          "&:hover:not(:disabled)": {
            backgroundColor: theme("colors.blue-2"),
            transform: "translateY(-2px)",
            boxShadow: theme("boxShadow.btn-cta-hover"),
          },
          "&:active:not(:disabled)": {
            transform: "translateY(3px)",
            boxShadow: theme("boxShadow.btn-cta-active"),
          },
          "&:disabled": {
            opacity: "0.65",
            cursor: "not-allowed",
          },
        },

        // Ghost/Secondary Button
        ".btn-ghost": {
          "@apply inline-flex items-center justify-center gap-2 px-[26px] py-[13px] rounded-md":
            {},
          "border-radius": "14px",
          backgroundColor: "transparent",
          color: theme("colors.text-2"),
          fontFamily: theme("fontFamily.grotesk"),
          fontSize: "14px",
          fontWeight: "600",
          letterSpacing: theme("letterSpacing.tight"),
          border: `1.5px solid ${theme("colors.border-2")}`,
          boxShadow: theme("boxShadow.btn-ghost"),
          "@apply transition-all duration-150 cursor-pointer outline-none select-none":
            {},

          "&:hover:not(:disabled)": {
            color: theme("colors.text"),
            borderColor: theme("colors.text-3"),
            boxShadow: theme("boxShadow.btn-ghost-hover"),
            transform: "translateY(-1px)",
          },
          "&:active:not(:disabled)": {
            transform: "translateY(2px)",
            boxShadow: theme("boxShadow.btn-ghost-active"),
          },
        },

        // Pill Chip
        ".chip": {
          "@apply inline-flex items-center px-4 py-2 border-[1.5px] cursor-pointer transition-all select-none whitespace-nowrap":
            {},
          borderColor: theme("colors.chip-border"),
          backgroundColor: theme("colors.chip-bg"),
          color: theme("colors.text-2"),
          fontFamily: theme("fontFamily.grotesk"),
          fontSize: "13px",
          fontWeight: "500",

          "&:hover": {
            borderColor: theme("colors.blue"),
            color: theme("colors.blue"),
          },
          "&.selected": {
            borderColor: theme("colors.chip-border-sel"),
            backgroundColor: theme("colors.chip-sel"),
            color: theme("colors.chip-sel-text"),
            fontWeight: "600",
          },
        },

        // Design System Input
        ".ds-input": {
          "@apply w-full bg-bg-2 border-[1.5px] rounded-sm px-4 py-3 font-grotesk text-base text-text outline-none transition-all":
            {},
          borderColor: theme("colors.border"),

          "&::placeholder": {
            color: theme("colors.text-3"),
          },
          "&:focus": {
            borderColor: theme("colors.blue"),
            boxShadow: `0 0 0 3px ${theme("colors.blue-tint")}`,
          },
          "&.error": {
            borderColor: theme("colors.error"),
            boxShadow: "rgba(239, 68, 68, 0.2) 0 0 0 3px",
          },
        },

        // Design System Card
        ".ds-card": {
          "@apply rounded-lg border bg-bg shadow-md": {},
          borderColor: theme("colors.border"),
        },

        // Mono Label/Tag
        ".mono-label": {
          fontFamily: theme("fontFamily.mono"),
          fontSize: "10px",
          fontWeight: "700",
          letterSpacing: theme("letterSpacing.mono"),
          textTransform: "uppercase",
          color: theme("colors.accent"),
        },

        ".mono-hint": {
          fontFamily: theme("fontFamily.mono"),
          fontSize: "11px",
          fontWeight: "400",
          color: theme("colors.text-3"),
        },

        // Progress Dot
        ".prog-dot": {
          "@apply w-2 h-2 rounded-full transition-all duration-250": {},
          backgroundColor: theme("colors.dot"),

          "&.active": {
            backgroundColor: theme("colors.accent"),
            "@apply scale-150": {},
          },
          "&.done": {
            backgroundColor: theme("colors.dot-done"),
          },
        },

        // Floating Math Symbols
        ".math-float": {
          fontFamily: theme("fontFamily.mono"),
          fontSize: "13px",
          color: theme("colors.math-float"),
          "@apply absolute pointer-events-none select-none": {},
          lineHeight: "1",
        },

        // Scrollbar Hide Utility Class
        ".scrollbar-hide": {
          "&::-webkit-scrollbar": {
            display: "none",
          },
          "-ms-overflow-style": "none",
          "scrollbar-width": "none",
        },

        // Chicken Entrance
        ".chicken-wrap": {
          "@apply transition-all duration-700": {},
          transform: "translateX(-140px)",
          opacity: "0",

          "&.in": {
            "@apply opacity-100": {},
            transform: "translateX(0)",
          },
        },

        // Theme Toggle Button
        ".theme-toggle": {
          "@apply flex items-center justify-center w-9 h-9 rounded-full border-[1.5px] bg-bg-2 text-text-2 cursor-pointer transition-all":
            {},
          borderColor: theme("colors.border"),

          "&:hover": {
            "@apply bg-bg-3": {},
            transform: "rotate(20deg)",
          },
        },

        // Confetti Particle
        ".confetti-particle": {
          "@apply absolute w-2 h-2 rounded": {},
          animation: theme("animation.confetti"),
        },
      });

      // Utilities
      addUtilities({
        ".step-in": {
          animation: theme("animation.step-in"),
        },
      });
    },
  ],
};