// theme.jsx — Reclova design system tokens, exported to window
// Synced 1:1 with the Reclova recruiter dashboard:
// warm paper #FAFAF7 · ink #0E1116 · saffron-orange accent #FF5A1F · indigo AI #1E2A78
// Instrument Serif display · Plus Jakarta Sans body · JetBrains Mono numerals

const THEMES = {
  reclova: {
    label: 'Reclova',
    vars: {
      '--bg': '#FAFAF7',
      '--bg-2': '#F5F4EE',
      '--surface': '#FFFFFF',
      '--surface-2': '#F5F4EE',
      '--border': '#E6E8EC',
      '--border-strong': '#CDD0D6',
      '--text': '#0E1116',
      '--text-dim': '#5B616B',
      '--text-faint': '#9AA0AA',
      '--ink': '#0E1116',
      '--ink-hover': '#1A1F29',
      '--ink-fg': '#FFFFFF',
      '--accent': '#FF5A1F',
      '--accent-hover': '#C7401A',
      '--accent-fg': '#FFFFFF',
      '--accent-soft': '#FFE9DE',
      '--accent-ring': 'rgba(255,90,31,0.28)',
      '--navy': '#1E2A78',
      '--navy-soft': '#E8EAF6',
      '--success': '#0E8A4F',
      '--success-soft': '#DCF3E6',
      '--warn': '#B6790A',
      '--warn-soft': '#FFF1CF',
      '--danger': '#C8362B',
      '--danger-soft': '#FBE3E0',
      '--shadow-sm': '0 1px 2px rgba(15,17,22,.04), 0 1px 1px rgba(15,17,22,.03)',
      '--shadow-md': '0 8px 24px -8px rgba(15,17,22,.12), 0 2px 6px rgba(15,17,22,.04)',
      '--shadow-lg': '0 24px 60px -20px rgba(15,17,22,.18), 0 8px 16px -8px rgba(15,17,22,.06)',
      '--video-bg': '#15171C',
    },
  },
  dark: {
    label: 'Reclova Dark',
    vars: {
      '--bg': 'oklch(0.2 0.012 60)',
      '--bg-2': 'oklch(0.235 0.013 60)',
      '--surface': 'oklch(0.255 0.014 60)',
      '--surface-2': 'oklch(0.3 0.015 60)',
      '--border': 'oklch(0.36 0.015 60)',
      '--border-strong': 'oklch(0.45 0.016 60)',
      '--text': 'oklch(0.95 0.008 75)',
      '--text-dim': 'oklch(0.74 0.012 65)',
      '--text-faint': 'oklch(0.58 0.012 62)',
      '--ink': 'oklch(0.93 0.008 78)',
      '--ink-hover': 'oklch(0.86 0.01 78)',
      '--ink-fg': 'oklch(0.21 0.012 60)',
      '--accent': 'oklch(0.72 0.16 38)',
      '--accent-hover': 'oklch(0.78 0.155 40)',
      '--accent-fg': 'oklch(0.18 0.025 40)',
      '--accent-soft': 'oklch(0.34 0.07 38)',
      '--accent-ring': 'oklch(0.72 0.16 38 / 0.35)',
      '--navy': 'oklch(0.66 0.12 268)',
      '--navy-soft': 'oklch(0.32 0.06 268)',
      '--success': 'oklch(0.7 0.13 152)',
      '--success-soft': 'oklch(0.32 0.06 152)',
      '--warn': 'oklch(0.76 0.12 78)',
      '--warn-soft': 'oklch(0.34 0.06 78)',
      '--danger': 'oklch(0.66 0.18 28)',
      '--danger-soft': 'oklch(0.32 0.08 28)',
      '--shadow-sm': '0 1px 2px oklch(0 0 0 / 0.4), 0 1px 3px oklch(0 0 0 / 0.3)',
      '--shadow-md': '0 4px 14px oklch(0 0 0 / 0.45), 0 2px 5px oklch(0 0 0 / 0.3)',
      '--shadow-lg': '0 20px 54px oklch(0 0 0 / 0.55), 0 8px 18px oklch(0 0 0 / 0.35)',
      '--video-bg': 'oklch(0.14 0.01 60)',
    },
  },
};

// Display is fixed to the dashboard's editorial serif; body sans is swappable.
const DISPLAY = "'Instrument Serif', Georgia, 'Times New Roman', serif";
const MONO = "'JetBrains Mono', ui-monospace, 'SF Mono', monospace";
const FONTS = {
  jakarta: { label: 'Plus Jakarta Sans', stack: "'Plus Jakarta Sans', system-ui, sans-serif" },
  geist: { label: 'Geist', stack: "'Geist', system-ui, sans-serif" },
  hanken: { label: 'Hanken Grotesk', stack: "'Hanken Grotesk', system-ui, sans-serif" },
};

function themeVars(themeKey, fontKey) {
  const t = THEMES[themeKey] || THEMES.reclova;
  const f = FONTS[fontKey] || FONTS.jakarta;
  return { ...t.vars, '--font': f.stack, '--font-display': DISPLAY, '--font-mono': MONO };
}

Object.assign(window, { THEMES, FONTS, themeVars });