/**
 * ActuateCMS — Tailwind token preset (CommonJS for tailwind.config.js)
 * Version 1.0 · Developer handoff
 *
 * Runtime theming: include tokens.css, then preset colors resolve via CSS vars.
 * Dark mode: `darkMode: ['selector', '[data-theme="dark"]']` on `<html>`.
 *
 * Admin note: `@actuate-media/cms-admin` uses Tailwind v4 + scoped `.actuate-admin.dark`
 * instead of `[data-theme]` — see design-system/README.md.
 */

const v =
  (name) =>
  ({ opacityValue } = {}) =>
    opacityValue === undefined
      ? `var(${name})`
      : `color-mix(in srgb, var(${name}) ${opacityValue * 100}%, transparent)`

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['selector', '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
        bg: v('--bg'),
        sb: v('--sb'),
        card: v('--card'),
        bdr: v('--bdr'),
        txt: v('--txt'),
        sub: v('--sub'),
        muted: v('--muted'),
        acc: { DEFAULT: v('--acc'), light: v('--acc-l'), mid: v('--acc-m') },
        suc: { DEFAULT: v('--suc'), light: v('--suc-l') },
        warn: { DEFAULT: v('--warn'), light: v('--warn-l') },
        err: { DEFAULT: v('--err'), light: v('--err-l') },
        info: { DEFAULT: v('--info'), light: v('--info-l') },
        ai1: v('--ai1'),
        ai2: v('--ai2'),
      },
      fontFamily: {
        sans: ['DM Sans', 'system-ui', '-apple-system', 'sans-serif'],
        mono: ['DM Mono', 'ui-monospace', 'monospace'],
      },
      fontSize: {
        page: ['21px', { letterSpacing: '-0.5px', fontWeight: '700' }],
        card: ['14px', { fontWeight: '600' }],
        body: ['13px', { fontWeight: '450' }],
        sub: ['12px', { fontWeight: '500' }],
        hint: ['11.5px', { fontWeight: '450' }],
        label: ['10px', { letterSpacing: '0.8px', fontWeight: '600' }],
      },
      borderRadius: {
        DEFAULT: '10px',
        control: '8px',
        badge: '6px',
        pill: '99px',
      },
      boxShadow: {
        card: 'var(--shd)',
        pop: 'var(--shd2)',
      },
      width: { sidebar: '224px', 'sidebar-col': '60px' },
      height: { topbar: '56px' },
      spacing: { topbar: '56px', sidebar: '224px' },
      transitionTimingFunction: {
        layout: 'cubic-bezier(.4, 0, .2, 1)',
      },
      transitionDuration: {
        fast: '120ms',
        base: '180ms',
        layout: '220ms',
      },
      backgroundImage: {
        ai: 'linear-gradient(135deg, var(--ai1), var(--ai2))',
        'ai-soft': 'var(--ai-soft)',
      },
    },
  },
  plugins: [],
}
