/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Montserrat", "NotoColorEmoji"],
        serif: ["Lora", "NotoColorEmoji"],
        mono: ["SourceCodePro", "NotoColorEmoji"],
        accent: ["Kanit", "NotoColorEmoji"],
        emoji: ["NotoColorEmoji"],
      },
      colors: {
        transparent: "transparent",
        current: "currentColor",
        primary: {
          50:      "#D1DAF0",
          100:     "#859DD6",
          200:     "#5778C7",
          300:     "#385AA8",
          400:     "#29417A",
          500:     "#1F315C",
          DEFAULT: "#1F315C",
          600:     "#14213D",
          700:     "#0F192E",
          800:     "#0A111F",
          900:     "#05080F",
        },
        secondary: {
          50:      "#DBF5FA",
          100:     "#B7EBF5",
          200:     "#81DCEE",
          300:     "#4BCDE7",
          400:     "#1DB8D7",
          500:     "#189AB4",
          DEFAULT: "#189AB4",
          600:     "#147B90",
          700:     "#0F5C6C",
          800:     "#0A3D48",
          900:     "#051E24",
        },
        accent: {
          50:      "#FED7DE",
          100:     "#FD9BAD",
          200:     "#FC738C",
          300:     "#FB4B6B",
          400:     "#FB234B",
          500:     "#DC042C",
          DEFAULT: "#DC042C",
          600:     "#9A031E",
          700:     "#780218",
          800:     "#500110",
          900:     "#280008",
        },
      },
      screens: {
        '3xl': '1920px',
        '4xl': '3840px',
      }
    },
  },
  plugins: [],
}