/**
 * Resolve --chart-color-1..12 from document.documentElement at runtime.
 * Returns hex array. Re-call on theme switch to get current theme values.
 */
export function resolveChartPalette(): string[] {
  if (typeof document === 'undefined') {
    // SSR-safe fallback (default dark theme hex values)
    return [
      '#2fb54e', '#ea4233', '#3892f3', '#f68512', '#2dceae', '#d8c537',
      '#9a4ee5', '#e54eb4', '#4e6ee5', '#e57a4e', '#c47de8', '#a3d837',
    ]
  }
  const style = getComputedStyle(document.documentElement)
  return Array.from({ length: 12 }, (_, i) =>
    style.getPropertyValue(`--chart-color-${i + 1}`).trim() || '#000000'
  )
}

/**
 * Resolve a single CSS custom property from document.documentElement at runtime.
 * Re-call on theme switch to pick up the current theme value.
 */
export function resolveCssVar(name: string, fallback: string): string {
  if (typeof document === 'undefined') return fallback
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback
}

/**
 * Legend text colour — Figma `Color Type/text/text_2` (--text-2: #cccccc dark /
 * #434343 light). The ECharts option takes resolved colour strings, so the no-DOM
 * fallback hex lives here in the resolution layer (same pattern as
 * resolveChartPalette), keeping component .vue files literal-hex-free
 * (AGENTS.md hard rule #4 / audit:design-system).
 */
export function resolveLegendColor(): string {
  return resolveCssVar('--text-2', '#cccccc')
}

/**
 * Axis / grid divider colour — Figma-aligned semantic token --line-divider-light
 * (= var(--line-light): #434343 dark / #cccccc light). Drives chart axis lines,
 * ticks and grid split lines. Like resolveLegendColor, the no-DOM fallback hex
 * lives here in the resolution layer so component .vue files stay literal-hex-free
 * (AGENTS.md hard rule #4 / audit:design-system / eslint no-hardcoded-color).
 */
export function resolveAxisLineColor(): string {
  return resolveCssVar('--line-divider-light', '#434343')
}