// witness-tokens.jsx — design tokens for The Witness
// Industrial Witness · Fate Ledger · Identity Capital
// Now theme-aware: accent palette swaps between brushed gold and brushed
// platinum (silver) via setMetal('gold' | 'silver').

const W = {
  // Bases
  void:    '#050507',
  ink:     '#0a0a0b',
  pitch:   '#101013',
  iron:    '#16171a',
  steel:   '#1f2025',
  gun:     '#2a2b30',
  edge:    'rgba(255,255,255,0.06)',
  edgeHi:  'rgba(255,255,255,0.12)',
  chisel:  'rgba(0,0,0,0.55)',

  // Type colors
  textHi:  '#e8e6e0',
  text:    '#b9b6ad',
  textLo:  '#6b6862',
  textXLo: '#3d3b37',

  // Accent (legacy names goldHi/gold/goldLo… still work as aliases below)
  accentHi: '#c4a662',
  accent:   '#a08344',
  accentLo: '#6b5326',
  accentDk: '#3a2d15',
  onAccent: '#1a1305',
  // RGB triplets used inside rgba(...) for glows / highlight lines
  hiRGB:    '255,235,170',
  midRGB:   '180,140,60',

  // Brushed gradient stops (for the metallic fill itself)
  gradHi:  '#d4b878',
  gradMid: '#a08344',
  gradLo:  '#7a5e2c',
  gradGlint: '#c2a25a',
  microHi: '255,235,170',  // hairline highlight rgb
  microLo: '40,28,10',     // hairline shadow rgb

  metal:   'gold',

  // Type
  mono:    "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace",
  display: "'Inter Tight', -apple-system, system-ui, sans-serif",
  serif:   "'Cormorant Garamond', 'Times New Roman', serif",
};

// ─────────────────────────────────────────────────────────────
// Palettes
const PALETTES = {
  gold: {
    accentHi: '#c4a662',
    accent:   '#a08344',
    accentLo: '#6b5326',
    accentDk: '#3a2d15',
    onAccent: '#1a1305',
    onAccentRGB: '26,19,5',
    hiRGB:    '255,235,170',
    midRGB:   '180,140,60',
    gradHi:   '#d4b878',
    gradMid:  '#a08344',
    gradLo:   '#7a5e2c',
    gradGlint:'#c2a25a',
    microHi:  '255,235,170',
    microLo:  '40,28,10',
  },
  silver: {
    // High-end brushed platinum / titanium — cool, dark, restrained.
    accentHi: '#d4d6dc',     // brushed highlight
    accent:   '#9a9da4',     // primary brushed silver
    accentLo: '#5a5d65',     // shadowed silver
    accentDk: '#2c2e33',     // deeply etched
    onAccent: '#0a0b0d',     // deep charcoal text on silver
    onAccentRGB: '10,11,13',
    hiRGB:    '230,233,242', // highlight (cool white)
    midRGB:   '150,160,180', // shadow / glow (cool gray-blue)
    gradHi:   '#dee0e6',
    gradMid:  '#9398a0',
    gradLo:   '#5f636b',
    gradGlint:'#c3c6cc',
    microHi:  '230,235,245',
    microLo:  '14,16,22',
  },
};

function setMetal(name) {
  const p = PALETTES[name] || PALETTES.gold;
  Object.assign(W, p, { metal: name });
  // Legacy aliases for any reference still using gold* names:
  W.goldHi  = p.accentHi;
  W.gold    = p.accent;
  W.goldLo  = p.accentLo;
  W.goldDk  = p.accentDk;
  W.goldGlint = p.gradGlint;
}
setMetal('gold');

// ─────────────────────────────────────────────────────────────
// Hairline metal — neutral, structural (panels, statusbars, etc).
function hairlineMetal({ base = W.iron, angle = 87, density = 1, intensity = 0.6 } = {}) {
  const a = (0.04 * intensity).toFixed(3);
  const b = (0.02 * intensity).toFixed(3);
  const c = (0.06 * intensity).toFixed(3);
  const step = (1.2 / density).toFixed(2);
  return [
    `repeating-linear-gradient(${angle}deg, rgba(255,255,255,${a}) 0 .5px, rgba(0,0,0,${b}) .5px ${step}px)`,
    `repeating-linear-gradient(${angle}deg, rgba(255,255,255,0) 0 6px, rgba(255,255,255,${b}) 6.5px 7px, rgba(255,255,255,0) 7px 14px)`,
    `linear-gradient(${angle - 90}deg, rgba(255,255,255,${c}) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.18) 100%)`,
    `linear-gradient(180deg, ${base} 0%, ${base} 100%)`,
  ].join(',');
}

// Brushed accent metal — theme-aware (gold or silver).
function brushedAccent({ angle = 87, intensity = 1 } = {}) {
  return [
    `repeating-linear-gradient(${angle}deg, rgba(${W.microHi},${0.05 * intensity}) 0 .5px, rgba(${W.microLo},${0.18 * intensity}) .5px 1.4px)`,
    `linear-gradient(${angle - 90}deg, ${W.gradHi} 0%, ${W.gradMid} 32%, ${W.gradLo} 62%, ${W.gradGlint} 100%)`,
  ].join(',');
}
// Backward-compat alias
const brushedGold = brushedAccent;

const etched = (color = '#000') => ({
  textShadow: `0 1px 0 rgba(255,255,255,0.04), 0 -1px 0 ${color}`,
});

const embossed = {
  boxShadow: [
    'inset 0 1px 0 rgba(255,255,255,0.05)',
    'inset 0 -1px 0 rgba(0,0,0,0.6)',
    'inset 1px 0 0 rgba(255,255,255,0.02)',
    'inset -1px 0 0 rgba(0,0,0,0.4)',
    '0 1px 0 rgba(255,255,255,0.02)',
  ].join(','),
};

const sunk = {
  boxShadow: [
    'inset 0 1px 2px rgba(0,0,0,0.7)',
    'inset 0 -1px 0 rgba(255,255,255,0.03)',
  ].join(','),
};

Object.assign(window, { W, PALETTES, setMetal, hairlineMetal, brushedAccent, brushedGold, etched, embossed, sunk });