/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        bg: 'rgb(var(--t-bg) / <alpha-value>)',
        surface: {
          DEFAULT: 'rgb(var(--t-surface) / <alpha-value>)',
          2: 'rgb(var(--t-surface-2) / <alpha-value>)',
        },
        line: {
          DEFAULT: 'rgb(var(--t-border) / <alpha-value>)',
          strong: 'rgb(var(--t-border-strong) / <alpha-value>)',
        },
        ink: {
          DEFAULT: 'rgb(var(--t-text) / <alpha-value>)',
          soft: 'rgb(var(--t-text-soft) / <alpha-value>)',
          mute: 'rgb(var(--t-text-mute) / <alpha-value>)',
        },
        brand: {
          DEFAULT: 'rgb(var(--t-accent) / <alpha-value>)',
          hover: 'rgb(var(--t-accent-hover) / <alpha-value>)',
        },
        ok: 'rgb(var(--t-success) / <alpha-value>)',
        warn: 'rgb(var(--t-warning) / <alpha-value>)',
        danger: 'rgb(var(--t-danger) / <alpha-value>)',
        info: 'rgb(var(--t-info) / <alpha-value>)',
      },
      fontFamily: {
        sans: 'var(--t-font-sans)',
        mono: 'var(--t-font-mono)',
      },
      borderRadius: {
        DEFAULT: 'var(--t-radius)',
        sm: 'var(--t-radius-sm)',
      },
      boxShadow: {
        card: 'var(--t-shadow-card)',
        pop: 'var(--t-shadow-pop)',
      },
    },
  },
  plugins: [],
}