/* Theme tokens for both visual directions */

const themePulse = {
  name: 'PULSE',
  fontDisplay: "'Geist', system-ui, sans-serif",
  fontBody: "'Geist', system-ui, sans-serif",
  fontMono: "'Geist Mono', ui-monospace, monospace",
  // surfaces
  bg: '#07090F',
  bgGrid: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0)',
  surface: '#0F1320',
  surfaceAlt: '#141A2A',
  surfaceHi: '#1A2236',
  border: 'rgba(255,255,255,0.07)',
  borderStrong: 'rgba(255,255,255,0.14)',
  // text
  text: '#E6E8EE',
  textMuted: '#8B93A7',
  textDim: '#5A6175',
  // accents
  primary: '#5B8DEF',      // azul elétrico
  primarySoft: 'rgba(91,141,239,0.14)',
  green: '#10B981',         // WhatsApp-ish
  greenSoft: 'rgba(16,185,129,0.14)',
  orange: '#F59E0B',
  orangeSoft: 'rgba(245,158,11,0.14)',
  pink: '#EC4899',
  pinkSoft: 'rgba(236,72,153,0.14)',
  purple: '#A78BFA',
  purpleSoft: 'rgba(167,139,250,0.14)',
  red: '#F87171',
  // radii + shadows
  radiusSm: '6px',
  radiusMd: '10px',
  radiusLg: '14px',
  radiusPill: '999px',
  shadow: '0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(255,255,255,0.04)',
  glow: '0 0 0 1px rgba(91,141,239,0.4), 0 10px 40px -10px rgba(91,141,239,0.5)',
};

const themeBloom = {
  name: 'BLOOM',
  fontDisplay: "'Space Grotesk', system-ui, sans-serif",
  fontBody: "'Geist', system-ui, sans-serif",
  fontMono: "'Geist Mono', ui-monospace, monospace",
  bg: '#F4EFE6',
  bgGrid: 'radial-gradient(circle at 1px 1px, rgba(20,19,26,0.06) 1px, transparent 0)',
  surface: '#FFFBF4',
  surfaceAlt: '#F4EFE6',
  surfaceHi: '#FFE6B8',
  border: '#14131A',
  borderStrong: '#14131A',
  text: '#14131A',
  textMuted: '#605C6E',
  textDim: '#9C97AD',
  primary: '#2D5BFF',
  primarySoft: '#C9D5FF',
  green: '#00C58E',
  greenSoft: '#B7F0DC',
  orange: '#FF7A1A',
  orangeSoft: '#FFD2B0',
  pink: '#FF5C9D',
  pinkSoft: '#FFC2D8',
  purple: '#9747FF',
  purpleSoft: '#DEC8FF',
  red: '#FF4D4D',
  radiusSm: '8px',
  radiusMd: '14px',
  radiusLg: '22px',
  radiusPill: '999px',
  shadow: '4px 4px 0 0 #14131A',
  glow: '6px 6px 0 0 #14131A',
};

const ThemeContext = React.createContext(themePulse);
const useTheme = () => React.useContext(ThemeContext);

window.themePulse = themePulse;
window.themeBloom = themeBloom;
window.ThemeContext = ThemeContext;
window.useTheme = useTheme;