// BoxMind design tokens — light & dark, plus Moving Mode accent override.
// Usage: import TOKENS and call theme(dark, moving) to get a flat map.

const TOKENS = {
  light: {
    bg: '#FAFBFC',
    surface: '#FFFFFF',
    surfaceTertiary: '#F3F4F6',
    elevated: '#FFFFFF',
    accent: '#0D7377',
    accentDark: '#0A5C5F',
    accentTint: 'rgba(13,115,119,0.10)',
    accentLight: '#E0F5F5',
    amber: '#F5A623',
    amberDark: '#D4891A',
    amberLight: '#FEF3E2',
    aiPurple: '#8B5CF6',
    aiPurpleDark: '#7C3AED',
    aiPurpleLight: '#F3EEFF',
    destructive: '#EF4444',
    destructiveLight: '#FEF2F2',
    success: '#10B981',
    successLight: '#ECFDF5',
    warning: '#F59E0B',
    warningLight: '#FFFBEB',
    info: '#3B82F6',
    infoLight: '#EFF6FF',
    textPrimary: '#1A1D21',
    textSecondary: '#6B7280',
    textTertiary: '#9CA3AF',
    onAccent: '#FFFFFF',
    sep: '#E5E7EB',
    sepLight: '#D1D5DB',
    shadowSm: '0 1px 3px rgba(15,23,42,0.08)',
    shadowMd: '0 4px 12px rgba(15,23,42,0.12)',
    shadowLg: '0 8px 24px rgba(15,23,42,0.16)',
    shadowXl: '0 12px 32px rgba(15,23,42,0.20)',
    fabShadow: '0 4px 8px rgba(13,115,119,0.30)',
  },
  dark: {
    bg: '#111318',
    surface: '#1C1F26',
    surfaceTertiary: '#252830',
    elevated: '#252830',
    accent: '#14B8A6',
    accentDark: '#0D9488',
    accentTint: 'rgba(20,184,166,0.15)',
    accentLight: 'rgba(20,184,166,0.18)',
    amber: '#F5A623',
    amberDark: '#D4891A',
    amberLight: 'rgba(245,166,35,0.18)',
    aiPurple: '#A78BFA',
    aiPurpleDark: '#8B5CF6',
    aiPurpleLight: 'rgba(139,92,246,0.18)',
    destructive: '#F87171',
    destructiveLight: 'rgba(239,68,68,0.16)',
    success: '#34D399',
    successLight: 'rgba(16,185,129,0.16)',
    warning: '#FBBF24',
    warningLight: 'rgba(245,158,11,0.16)',
    info: '#60A5FA',
    infoLight: 'rgba(59,130,246,0.16)',
    textPrimary: '#F3F4F6',
    textSecondary: '#9CA3AF',
    textTertiary: '#6B7280',
    onAccent: '#06131A',
    sep: '#2D3139',
    sepLight: '#3D4149',
    shadowSm: '0 1px 3px rgba(0,0,0,0.35)',
    shadowMd: '0 4px 12px rgba(0,0,0,0.4)',
    shadowLg: '0 8px 24px rgba(0,0,0,0.5)',
    shadowXl: '0 12px 32px rgba(0,0,0,0.6)',
    fabShadow: '0 4px 8px rgba(0,0,0,0.5)',
  },
};

// Moving Mode swaps the accent to orange; everything else stays the same.
const MOVING = {
  light: { accent: '#EA580C', accentDark: '#C2410C', accentTint: 'rgba(234,88,12,0.10)', accentLight: '#FFEDD5', fabShadow: '0 4px 8px rgba(234,88,12,0.30)' },
  dark:  { accent: '#F97316', accentDark: '#EA580C', accentTint: 'rgba(249,115,22,0.18)', accentLight: 'rgba(249,115,22,0.18)', fabShadow: '0 4px 8px rgba(0,0,0,0.5)' },
};

function theme(dark = false, moving = false) {
  const base = dark ? TOKENS.dark : TOKENS.light;
  return moving ? { ...base, ...MOVING[dark ? 'dark' : 'light'] } : base;
}

// Type scale per brief
const TYPE = {
  display:   { fontSize: 28, lineHeight: '34px', fontWeight: 700, letterSpacing: '-0.3px' },
  h1:        { fontSize: 20, lineHeight: '26px', fontWeight: 600 },
  h2:        { fontSize: 18, lineHeight: '24px', fontWeight: 600 },
  h3:        { fontSize: 17, lineHeight: '22px', fontWeight: 600 },
  body:      { fontSize: 15, lineHeight: '20px', fontWeight: 400 },
  bodySm:    { fontSize: 14, lineHeight: '20px', fontWeight: 400 },
  btn:       { fontSize: 16, lineHeight: '20px', fontWeight: 600, letterSpacing: '0.3px' },
  label:     { fontSize: 13, lineHeight: '18px', fontWeight: 500 },
  caption:   { fontSize: 11, lineHeight: '14px', fontWeight: 500 },
  overline:  { fontSize: 11, lineHeight: '14px', fontWeight: 700, letterSpacing: '1px', textTransform: 'uppercase' },
};

const FONT_STACK = '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", Roboto, system-ui, sans-serif';

Object.assign(window, { TOKENS, MOVING, theme, TYPE, FONT_STACK });