@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Colors */
  --bg:        #FFFFFF;
  --fg:        #0A0A0A;
  --secondary: #F5F5F5;
  --muted:     #737373;
  --border:    #E5E5E5;

  /* Opacity variants (used for borders/fills on dark sections) */
  --fg-02: rgba(10,10,10,0.02);
  --fg-04: rgba(10,10,10,0.04);
  --fg-10: rgba(10,10,10,0.10);
  --fg-20: rgba(10,10,10,0.20);
  --fg-30: rgba(10,10,10,0.30);
  --fg-50: rgba(10,10,10,0.50);
  --fg-60: rgba(10,10,10,0.60);

  /* Inverted (dark sections use bg as text color) */
  --bg-10: rgba(255,255,255,0.10);
  --bg-20: rgba(255,255,255,0.20);
  --bg-40: rgba(255,255,255,0.40);
  --bg-50: rgba(255,255,255,0.50);

  /* Accent (kept from design) */
  --accent: #eca8d6;

  /* Typography */
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Radius — sharp corners per design */
  --radius: 0;
}