import type { Config } from 'tailwindcss';

/**
 * Veect chrome palette — deliberately quiet, warm neutrals so the
 * user's brand (rendered on the canvas) is always the hero.
 * All colors resolve through CSS variables so dark/light theming
 * is a single `data-theme` attribute swap. See src/index.css.
 */
export default {
  darkMode: ['selector', '[data-theme="dark"]'],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        bg: 'var(--bg)',
        panel: 'var(--panel)',
        raised: 'var(--raised)',
        line: 'var(--line)',
        'line-2': 'var(--line-2)',
        chip: 'var(--chip)',
        ink: { DEFAULT: 'var(--t1)', 2: 'var(--t2)', 3: 'var(--t3)' },
        accent: { DEFAULT: 'var(--accent)', text: 'var(--accent-text)', dim: 'var(--accent-dim)' },
        'btn-ink': 'var(--btn-ink)',
        live: 'var(--live)',
        warn: 'var(--warn)',
        danger: 'var(--danger)',
      },
      fontFamily: {
        sans: ['"Instrument Sans"', 'system-ui', 'sans-serif'],
        mono: ['"Fragment Mono"', 'ui-monospace', 'monospace'],
      },
      borderRadius: { sm: '2px', md: '2px', lg: '2px' },
      boxShadow: {
        float: '0 0 0 1px var(--line-2)',
        raise: 'none',
      },
    },
  },
  plugins: [],
} satisfies Config;