import type { Config } from "tailwindcss";

export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        ocean: {
          // Derived from Logo Blue (#075985)
          950: "#021526", // Deep midnight base
          900: "#032d45", // Darker navy
          800: "#054161", // Deep ocean
          700: "#064e75", // Slightly darker than logo
          600: "#075985", // [LOGO MATCH: Ocean Blue]
          500: "#0ea5e9", // Bright accent
        },
        slate: {
          ink: "#0f172a",  // Darker, cooler slate to match the new Ocean 950
          mist: "#94a3b8", // Lightened for better contrast on dark blues
        },
        coast: {
          teal: "#2dd4bf", // Keep for pop
          deep: "#0d9488", 
          sky: "#38bdf8",
          foam: "#E0F2FE", // [LOGO MATCH: Seafoam/Sky]
        },
        sand: {
          DEFAULT: "#D2B48C", // [LOGO MATCH: Sand]
          warm: "#f3e1c7",    // Lighter tint for backgrounds/cards
        },
        sunset: {
          gold: "#FB8524", // [LOGO MATCH: Sunset Gold]
          amber: "#f59e0b",
        },
      },
      // colors: {
      //   ocean: {
      //     950: "#0a1628",
      //     900: "#0f2137",
      //     800: "#152a45",
      //     700: "#1c3554",
      //     600: "#244468",
      //   },
      //   slate: {
      //     ink: "#1e293b",
      //     mist: "#64748b",
      //   },
      //   coast: {
      //     teal: "#2dd4bf",
      //     deep: "#0d9488",
      //     sky: "#38bdf8",
      //     foam: "#7dd3fc",
      //   },
      //   sand: {
      //     DEFAULT: "#e8d5b7",
      //     warm: "#f4e4c1",
      //   },
      //   sunset: {
      //     gold: "#d4a574",
      //     amber: "#f59e0b",
      //   },
      // },
      fontFamily: {
        sans: [
          "DM Sans",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif",
        ],
        display: ["Outfit", "DM Sans", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "ui-monospace", "monospace"],
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
      },
      boxShadow: {
        glass: "0 8px 32px rgba(15, 33, 55, 0.12)",
        "glass-dark": "0 8px 32px rgba(0, 0, 0, 0.35)",
      },
      animation: {
        wave: "wave 18s ease-in-out infinite",
        float: "float 6s ease-in-out infinite",
      },
      keyframes: {
        wave: {
          "0%, 100%": { transform: "translateX(0) scaleY(1)" },
          "50%": { transform: "translateX(-4%) scaleY(1.02)" },
        },
        float: {
          "0%, 100%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-6px)" },
        },
      },
    },
  },
  plugins: [],
} satisfies Config;