/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,svelte}"],
  safelist: ["w-4", "h-4"],
  theme: {
    extend: {},
    screens: {
      xs: "400px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
    colors: {
      black: "var(--black)",
      white: "var(--white)",
      transparent: "var(--transparent)",
      accent: "var(--accent)",
      'accent-l': "var(--accent-l)",
      'accent-d': "var(--accent-d)",
      warm: "var(--warm)",
      'warm-l': "var(--warm-l)",
      'warm-d': "var(--warm-d)",
      dark: "var(--dark)",
      mid: "var(--mid)",
      light: "var(--light)",
      lighter: "var(--lighter)",
      lightest: "var(--lightest)",
      cocoa: "var(--cocoa)",
      'cocoa-l': "var(--cocoa-l)",
      'cocoa-d': "var(--cocoa-d)",
      danger: "var(--danger)",
      warning: "var(--warning)",
      success: "var(--success)",
    },
  },
  plugins: [],
}