// palettes.jsx   color system + theme (dark/light) application
//
// Each palette only defines accent colors + gradient/mesh. The bg/ink/border
// tokens come from MODE (dark or light). Switching mode keeps accents intact.

const PALETTES = {
  signature: {
    name: 'Signature',
    accent:  '#5B7BFF',
    accent2: '#9B5CFF',
    gradient: 'linear-gradient(135deg, #5B7BFF 0%, #9B5CFF 100%)',
    gradientSoft: 'linear-gradient(135deg, rgba(91,123,255,0.14) 0%, rgba(155,92,255,0.14) 100%)',
    mesh: 'radial-gradient(60% 50% at 20% 0%, rgba(91,123,255,0.28) 0%, transparent 60%), radial-gradient(50% 50% at 90% 10%, rgba(155,92,255,0.30) 0%, transparent 60%), radial-gradient(50% 70% at 70% 100%, rgba(91,123,255,0.16) 0%, transparent 60%)',
  },
  aurora: {
    name: 'Aurora',
    accent:  '#00C9F5',
    accent2: '#FF3DC5',
    gradient: 'linear-gradient(135deg, #00C9F5 0%, #FF3DC5 100%)',
    gradientSoft: 'linear-gradient(135deg, rgba(0,201,245,0.14) 0%, rgba(255,61,197,0.14) 100%)',
    mesh: 'radial-gradient(60% 50% at 15% 0%, rgba(0,201,245,0.30) 0%, transparent 60%), radial-gradient(50% 50% at 92% 8%, rgba(255,61,197,0.28) 0%, transparent 60%), radial-gradient(60% 70% at 70% 100%, rgba(0,201,245,0.16) 0%, transparent 60%)',
  },
  electric: {
    name: 'Electric',
    accent:  '#C8FF1F',
    accent2: '#5B7BFF',
    gradient: 'linear-gradient(135deg, #C8FF1F 0%, #5B7BFF 100%)',
    gradientSoft: 'linear-gradient(135deg, rgba(200,255,31,0.18) 0%, rgba(91,123,255,0.14) 100%)',
    mesh: 'radial-gradient(60% 50% at 15% 0%, rgba(200,255,31,0.22) 0%, transparent 60%), radial-gradient(50% 50% at 92% 8%, rgba(91,123,255,0.22) 0%, transparent 60%), radial-gradient(60% 70% at 70% 100%, rgba(200,255,31,0.12) 0%, transparent 60%)',
  },
  midnight: {
    name: 'Midnight Sun',
    accent:  '#FF7A29',
    accent2: '#FF4D6D',
    gradient: 'linear-gradient(135deg, #FF7A29 0%, #FF4D6D 100%)',
    gradientSoft: 'linear-gradient(135deg, rgba(255,122,41,0.16) 0%, rgba(255,77,109,0.14) 100%)',
    mesh: 'radial-gradient(60% 50% at 15% 0%, rgba(255,122,41,0.26) 0%, transparent 60%), radial-gradient(50% 50% at 92% 8%, rgba(255,77,109,0.24) 0%, transparent 60%), radial-gradient(60% 70% at 70% 100%, rgba(255,122,41,0.14) 0%, transparent 60%)',
  },
  adriatic: {
    name: 'Adriatic',
    accent:  '#1FB7C2',
    accent2: '#3DB9D9',
    gradient: 'linear-gradient(135deg, #1FB7C2 0%, #6F5BFF 100%)',
    gradientSoft: 'linear-gradient(135deg, rgba(31,183,194,0.16) 0%, rgba(111,91,255,0.14) 100%)',
    mesh: 'radial-gradient(60% 50% at 15% 0%, rgba(31,183,194,0.26) 0%, transparent 60%), radial-gradient(50% 50% at 92% 8%, rgba(111,91,255,0.22) 0%, transparent 60%), radial-gradient(60% 70% at 70% 100%, rgba(31,183,194,0.14) 0%, transparent 60%)',
  },
};

// Mode-specific tokens: switch all surface colors when going dark/light.
const MODES = {
  dark: {
    bg:        '#0A0A0B',
    bgAlt:     '#101015',
    bgElev:    '#16161E',
    ink:       '#F5F6FB',
    inkSoft:   '#D7D9E3',
    muted:     '#8E92A6',
    border:    'rgba(255,255,255,0.10)',
    borderStrong: 'rgba(255,255,255,0.18)',
    chipBg:    'rgba(255,255,255,0.06)',
    onAccent:  '#0A0A0B',
    grid:      'rgba(255,255,255,0.04)',
    selection: 'rgba(255,255,255,0.18)',
  },
  light: {
    bg:        '#FAFAF8',
    bgAlt:     '#F1F1ED',
    bgElev:    '#FFFFFF',
    ink:       '#0A0A0B',
    inkSoft:   '#2A2A33',
    muted:     '#5C5F70',
    border:    'rgba(10,10,11,0.08)',
    borderStrong: 'rgba(10,10,11,0.18)',
    chipBg:    'rgba(10,10,11,0.05)',
    onAccent:  '#FFFFFF',
    grid:      'rgba(10,10,11,0.05)',
    selection: 'rgba(10,10,11,0.12)',
  },
};

function applyTheme(paletteKey, mode) {
  const p = PALETTES[paletteKey] || PALETTES.signature;
  const m = MODES[mode] || MODES.dark;
  const r = document.documentElement.style;
  // Accent (palette) tokens
  r.setProperty('--accent',  p.accent);
  r.setProperty('--accent2', p.accent2);
  r.setProperty('--gradient', p.gradient);
  r.setProperty('--gradient-soft', p.gradientSoft);
  r.setProperty('--mesh', p.mesh);
  // Surface (mode) tokens
  r.setProperty('--bg', m.bg);
  r.setProperty('--bg-alt', m.bgAlt);
  r.setProperty('--bg-elev', m.bgElev);
  r.setProperty('--ink', m.ink);
  r.setProperty('--ink-soft', m.inkSoft);
  r.setProperty('--muted', m.muted);
  r.setProperty('--border', m.border);
  r.setProperty('--border-strong', m.borderStrong);
  r.setProperty('--chip-bg', m.chipBg);
  r.setProperty('--on-accent', m.onAccent);
  r.setProperty('--grid', m.grid);
  r.setProperty('--selection', m.selection);
  document.documentElement.setAttribute('data-theme', mode);
  document.documentElement.setAttribute('data-palette', paletteKey);
}

// Back-compat shim so old callers (applyPalette) still work.
function applyPalette(key) { applyTheme(key, getCurrentMode()); }
function getCurrentMode() {
  return document.documentElement.getAttribute('data-theme') || 'dark';
}

window.PALETTES = PALETTES;
window.MODES = MODES;
window.applyTheme = applyTheme;
window.applyPalette = applyPalette;
window.getCurrentMode = getCurrentMode;