// Design tokens for 好鄰居 - shared across all pages
// Registers tokens globally so all component scripts can use them.

const HAOLIN_TOKENS = {
  // Colors - warm earthy palette
  colors: {
    // Backgrounds
    bg: '#FBF6EF',          // 主背景：暖白
    bgAlt: '#F4ECE0',       // 次背景：奶茶
    bgSoft: '#FAF3EA',      // 卡片背景
    paper: '#FFFFFF',       // 純卡片白（帶暖）
    // Brand
    primary: '#D4704A',     // 泥橘 - 主 CTA
    primaryDark: '#B85A36', // hover
    primarySoft: '#F5D9C8', // 淺色背景
    accent: '#8BAE7C',      // 薄荷草綠
    accentDark: '#7A9D6B',
    accentSoft: '#D8E6CF',
    warm: '#E8A87C',        // 柔橘（次要）
    gold: '#C89968',        // 溫暖金棕
    // Text
    ink: '#2B2520',         // 主文字 深棕
    inkSoft: '#5C5047',     // 次文字
    inkMuted: '#8A7F74',    // 輔助文字
    line: '#E8DFD2',        // 分隔線
    lineSoft: '#F0E8DB',
    // Status
    success: '#6E9A62',
    warning: '#D9A84A',
    danger: '#C4695A',
    info: '#7A96A8',
  },
  // Radius presets (tweakable)
  radiusPresets: {
    'lg':  { sm: '8px',  md: '10px', lg: '14px', xl: '18px', '2xl': '22px', pill: '999px' },
    '2xl': { sm: '10px', md: '14px', lg: '18px', xl: '22px', '2xl': '28px', pill: '999px' },
    '3xl': { sm: '12px', md: '18px', lg: '24px', xl: '32px', '2xl': '40px', pill: '999px' },
  },
  // Density presets
  densityPresets: {
    loose:   { pad: 1.25, gap: 1.25, line: 1.75 },
    medium:  { pad: 1.0,  gap: 1.0,  line: 1.6 },
    compact: { pad: 0.78, gap: 0.78, line: 1.5 },
  },
  // Font presets
  fontPresets: {
    sans:    { heading: '"Noto Sans TC", sans-serif',  body: '"Noto Sans TC", sans-serif' },
    serif:   { heading: '"Noto Serif TC", serif',      body: '"Noto Sans TC", sans-serif' },
    hand:    { heading: '"Huninn", "Noto Serif TC", serif', body: '"Noto Sans TC", sans-serif' },
  },
  // Hue (for primary color slider) - 18 = 泥橘, 28 = 柔橘
  shadow: {
    sm:  '0 1px 2px rgba(64,40,20,0.05)',
    md:  '0 4px 14px rgba(80,50,25,0.08)',
    lg:  '0 12px 32px rgba(80,50,25,0.12)',
    hover: '0 14px 38px rgba(90,55,30,0.16)',
  }
};

window.HAOLIN_TOKENS = HAOLIN_TOKENS;

// Helper to derive primary color from hue slider (0..1, 0 = muddy orange, 1 = soft peach)
window.HAOLIN_HUE_TO_PRIMARY = function(t) {
  // oklch interpolation-ish: from #D4704A (muddy) to #E8A87C (soft)
  const lerp = (a, b, k) => Math.round(a + (b - a) * k);
  const from = [0xD4, 0x70, 0x4A];
  const to   = [0xE8, 0xA8, 0x7C];
  const r = lerp(from[0], to[0], t);
  const g = lerp(from[1], to[1], t);
  const b = lerp(from[2], to[2], t);
  return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`.toUpperCase();
};

window.HAOLIN_HUE_TO_PRIMARY_DARK = function(t) {
  const lerp = (a, b, k) => Math.round(a + (b - a) * k);
  const from = [0xB8, 0x5A, 0x36];
  const to   = [0xCE, 0x8A, 0x5E];
  const r = lerp(from[0], to[0], t);
  const g = lerp(from[1], to[1], t);
  const b = lerp(from[2], to[2], t);
  return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`.toUpperCase();
};