// Diagrams restyled to match the Obsidian + Claude Code deck:
// - Bg #0a0a0b, elev #141418, fg #ebebeb, dim #9a9aa0, dimmer #5c5c63
// - Accent violet #8b5cf6 + cyan #22d3ee
// - Type: Space Grotesk (display, -0.02em), Inter (body), JetBrains Mono (mono)
// - Eyebrow: mono cyan uppercase 0.15em with "// " prefix
// - Hint: top-right, mono, dimmer, uppercase 0.15em
// - Cards: bg-elev + border #26262b, radius 14
// - Quote: 3px violet left border

const TP_BG = '#0a0a0b';
const TP_ELEV = '#141418';
const TP_FG = '#ebebeb';
const TP_DIM = '#9a9aa0';
const TP_DIMMER = '#5c5c63';
const TP_BORDER = '#26262b';
const TP_VIOLET = '#8b5cf6';
const TP_CYAN = '#22d3ee';
const TP_VIOLET_SOFT = 'rgba(139, 92, 246, 0.12)';
const TP_CYAN_SOFT = 'rgba(34, 211, 238, 0.10)';

const TP_DISPLAY = "'Space Grotesk', sans-serif";
const TP_BODY = "'Inter', -apple-system, sans-serif";
const TP_MONO = "'JetBrains Mono', monospace";

// Slide chrome — eyebrow + hint corner — matches deck style
function SlideChrome({ eyebrow, hint }) {
  return (
    <>
      <div style={{
        position: 'absolute', top: 60, right: 80,
        fontFamily: TP_MONO, fontSize: 13, color: TP_DIMMER,
        textTransform: 'uppercase', letterSpacing: '0.15em',
      }}>{hint}</div>
      <div style={{
        position: 'absolute', top: 60, left: 80,
        fontFamily: TP_MONO, fontSize: 13, color: TP_CYAN,
        textTransform: 'uppercase', letterSpacing: '0.15em',
      }}>
        <span style={{ color: TP_DIMMER }}>{'// '}</span>{eyebrow}
      </div>
    </>
  );
}

// Display title — Space Grotesk, white, tight tracking
function SlideTitle({ children, top = 110, opacity = 1, maxWidth = 1100 }) {
  return (
    <div style={{
      position: 'absolute', left: 80, top,
      opacity,
      fontFamily: TP_DISPLAY, fontSize: 64, fontWeight: 600,
      color: TP_FG, letterSpacing: '-0.02em', lineHeight: 1.1,
      maxWidth,
    }}>{children}</div>
  );
}

// Lead body — Inter, dim
function SlideLead({ children, top, left = 80, opacity = 1, maxWidth = 900 }) {
  return (
    <div style={{
      position: 'absolute', left, top,
      opacity, maxWidth,
      fontFamily: TP_BODY, fontSize: 22, lineHeight: 1.5,
      color: TP_DIM,
    }}>{children}</div>
  );
}

window.TP_BG = TP_BG; window.TP_ELEV = TP_ELEV; window.TP_FG = TP_FG;
window.TP_DIM = TP_DIM; window.TP_DIMMER = TP_DIMMER; window.TP_BORDER = TP_BORDER;
window.TP_VIOLET = TP_VIOLET; window.TP_CYAN = TP_CYAN;
window.TP_VIOLET_SOFT = TP_VIOLET_SOFT; window.TP_CYAN_SOFT = TP_CYAN_SOFT;
window.TP_DISPLAY = TP_DISPLAY; window.TP_BODY = TP_BODY; window.TP_MONO = TP_MONO;
window.SlideChrome = SlideChrome; window.SlideTitle = SlideTitle; window.SlideLead = SlideLead;