// Skin themes — one per channel/course type + UI skin shells.
// Each theme defines tokens that override CSS variables on :root.

const THEMES = {
  // -------- Channel themes (content-matched) --------
  zen: {
    id: 'zen',
    name: 'Ink & Rice · 墨韵',
    nameEn: 'Ink & Rice',
    channel: 'classics',
    kind: 'light',
    pattern: 'ink-wash',
    tokens: {
      '--bg':        '#f4ede0',
      '--bg-alt':    '#ebe3d1',
      '--surface':   '#faf5eb',
      '--ink':       '#1a1713',
      '--ink-2':     '#3b342a',
      '--ink-3':     '#6f655a',
      '--ink-4':     '#a99f8f',
      '--line':      '#e1d9c7',
      '--line-2':    '#cbc1ad',
      '--accent':    '#8a1919',
      '--accent-2':  '#b28a42',
      '--accent-soft': '#f0e6cf',
    },
  },
  rose: {
    id: 'rose',
    name: 'Rose Gold · 情意',
    nameEn: 'Rose Gold',
    channel: 'emotions',
    kind: 'light',
    pattern: 'petal',
    tokens: {
      '--bg':        '#faf2ee',
      '--bg-alt':    '#f3e5de',
      '--surface':   '#fdf7f4',
      '--ink':       '#2a1818',
      '--ink-2':     '#4a2d2d',
      '--ink-3':     '#8a6e6b',
      '--ink-4':     '#baa6a2',
      '--line':      '#eedcd4',
      '--line-2':    '#d9bcaf',
      '--accent':    '#b54868',
      '--accent-2':  '#c9a66a',
      '--accent-soft': '#f3dfd7',
    },
  },
  cyber: {
    id: 'cyber',
    name: 'Neon Ink · AI',
    nameEn: 'Neon Ink',
    channel: 'ai',
    kind: 'dark',
    pattern: 'grid',
    tokens: {
      '--bg':        '#0c1014',
      '--bg-alt':    '#131820',
      '--surface':   '#171d26',
      '--ink':       '#e9eef5',
      '--ink-2':     '#c5cedc',
      '--ink-3':     '#8b95a6',
      '--ink-4':     '#5a6374',
      '--line':      '#222a36',
      '--line-2':    '#2e3747',
      '--accent':    '#4fd4c4',
      '--accent-2':  '#c0e06a',
      '--accent-soft': '#1c2a2c',
    },
  },
  admiral: {
    id: 'admiral',
    name: 'Navy & Gold · 商道',
    nameEn: 'Navy & Gold',
    channel: 'business',
    kind: 'light',
    pattern: 'line',
    tokens: {
      '--bg':        '#f3f1ec',
      '--bg-alt':    '#e7e4dc',
      '--surface':   '#fbfaf6',
      '--ink':       '#111826',
      '--ink-2':     '#1f2a3d',
      '--ink-3':     '#4e5b70',
      '--ink-4':     '#8c95a5',
      '--line':      '#dcd8cc',
      '--line-2':    '#b8b3a4',
      '--accent':    '#1a3a6b',
      '--accent-2':  '#c9a747',
      '--accent-soft': '#e6e2d2',
    },
  },
  jade: {
    id: 'jade',
    name: 'Jade Mountain · 养生',
    nameEn: 'Jade Mountain',
    channel: 'wellness',
    kind: 'light',
    pattern: 'mountain',
    tokens: {
      '--bg':        '#edf1ea',
      '--bg-alt':    '#dde5d9',
      '--surface':   '#f5f8f0',
      '--ink':       '#111b15',
      '--ink-2':     '#233329',
      '--ink-3':     '#5d7165',
      '--ink-4':     '#9bab9f',
      '--line':      '#d5ddcb',
      '--line-2':    '#b3bfa6',
      '--accent':    '#2f6b4a',
      '--accent-2':  '#b08a3c',
      '--accent-soft': '#deecd6',
    },
  },
};

const CHANNEL_THEME = {
  classics:  'zen',
  emotions:  'rose',
  ai:        'cyber',
  business:  'admiral',
  wellness:  'jade',
};

function applyTheme(themeId) {
  const theme = THEMES[themeId] || THEMES.zen;
  const root = document.documentElement;
  Object.entries(theme.tokens).forEach(([k, v]) => root.style.setProperty(k, v));
  root.setAttribute('data-theme', themeId);
  root.setAttribute('data-theme-kind', theme.kind);
}

Object.assign(window, { THEMES, CHANNEL_THEME, applyTheme });