/** @type {import('tailwindcss').Config} */

// Pete's palette colours change with the phase (and the casino room), so they
// live in CSS vars set on <html> by input.css. Each is exposed as bare rgb
// channels so Tailwind can put an opacity on it: text-ink/80, border-ink/10,
// bg-accent/20. Writing text-[color:var(--ink)]/80 instead compiles to nothing.
const phase = (name) => `rgb(var(--${name}-rgb) / <alpha-value>)`;

module.exports = {
  content: [
    "./internal/web/templates/**/*.html",
    "./internal/web/static/**/*.{js,css}",
  ],
  theme: {
    extend: {
      colors: {
        ink: phase("ink"),
        muted: phase("muted"),
        accent: phase("accent"),
        warn: phase("warn"),
        card: phase("card"),
      },
    },
  },
  plugins: [],
};