import { ref, onMounted, watch } from 'vue'

// Theme-aware: reads from CSS custom properties when available
function getNumColorFromTheme(num) {
  const themeMap = {
    1: '--num-1',
    2: '--num-2',
    3: '--num-3',
    4: '--num-4',
    5: '--num-5',
    6: '--num-6',
    7: '--num-7',
    8: '--num-8',
    9: '--num-9',
  }
  // Fallback (dark theme default — matches CSS :root)
  const DEFAULTS = {
    1: '#D94A4A', 2: '#4A90D9', 3: '#E8A238', 4: '#2D8B67',
    5: '#D4A017', 6: '#7B6FA0', 7: '#4A6FA5', 8: '#C9A84C', 9: '#B85C3A'
  }
  return DEFAULTS[num] || '#FFFFFF'
}

export { getNumColorFromTheme }