/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Tokens pilotés par variables CSS (voir :root et .dark dans index.css).
        bg: 'rgb(var(--c-bg) / <alpha-value>)',
        sidebar: 'rgb(var(--c-sidebar) / <alpha-value>)',
        panel: 'rgb(var(--c-panel) / <alpha-value>)',
        panel2: 'rgb(var(--c-panel2) / <alpha-value>)',
        hover: 'rgb(var(--c-hover) / <alpha-value>)',
        border: 'rgb(var(--c-border) / <alpha-value>)',
        'border-strong': 'rgb(var(--c-border-strong) / <alpha-value>)',
        ink: 'rgb(var(--c-ink) / <alpha-value>)',
        muted: 'rgb(var(--c-muted) / <alpha-value>)',
        subtle: 'rgb(var(--c-subtle) / <alpha-value>)',
        accent: 'rgb(var(--c-accent) / <alpha-value>)',
        'accent-soft': 'rgb(var(--c-accent-soft) / <alpha-value>)',
        accentfg: 'rgb(var(--c-accentfg) / <alpha-value>)',
        accent2: 'rgb(var(--c-accent2) / <alpha-value>)'
      },
      boxShadow: {
        // Élévation pilotée par le thème : en sombre, les ombres portées
        // seules sont invisibles — les variables ajoutent un liseré interne.
        card: 'var(--shadow-card)',
        raised: 'var(--shadow-raised)',
        pop: 'var(--shadow-pop)'
      },
      spacing: {
        sidebar: '15rem',
        'sidebar-sm': '3.75rem'
      },
      transitionTimingFunction: {
        smooth: 'cubic-bezier(0.32, 0.72, 0, 1)'
      }
    }
  },
  plugins: []
}