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

// The six party hues each come as a strong fill, a soft tint and an ink
// readable on that tint (see the token notes in src/index.css).
const hues = Object.fromEntries(
  [1, 2, 3, 4, 5, 6].flatMap((n) => [
    [`c${n}`, `var(--c${n})`],
    [`c${n}-soft`, `var(--c${n}-soft)`],
    [`c${n}-ink`, `var(--c${n}-ink)`],
  ])
)

export default {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      // Color tokens are CSS variables (defined per-theme in src/index.css)
      // rather than literal hex values, so switching the document's
      // `data-theme` re-themes every existing utility class with no markup
      // changes. See src/lib/theme.js for the theme registry.
      colors: {
        surface: 'var(--color-surface)',
        'surface-raised': 'var(--color-surface-raised)',
        'surface-sunken': 'var(--color-surface-sunken)',
        border: 'var(--color-border)',
        'border-strong': 'var(--color-border-strong)',
        'text-primary': 'var(--color-text-primary)',
        'text-secondary': 'var(--color-text-secondary)',
        'text-faint': 'var(--color-text-faint)',
        accent: 'var(--color-accent)',
        'accent-hover': 'var(--color-accent-hover)',
        'on-accent': 'var(--color-on-accent)',
        'accent-warm': 'var(--color-accent-warm)',
        'on-accent-warm': 'var(--color-on-accent-warm)',
        danger: 'var(--color-danger)',
        ...hues,
      },
      fontFamily: {
        display: ['"Bricolage Grotesque"', 'system-ui', 'sans-serif'],
        body: ['Figtree', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
      },
      // Rounder than Tailwind's defaults across the board — the Confetti look
      // is soft and friendly, and bumping the scale here restyles every
      // existing `rounded-*` without touching markup.
      borderRadius: {
        DEFAULT: '0.375rem',
        md: '0.75rem',
        lg: '1rem',
        xl: '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.75rem',
      },
      boxShadow: {
        card: 'var(--shadow-card)',
        pop: 'var(--shadow-pop)',
      },
    },
  },
  plugins: [],
}