/* base.css - Variables, Fonts, and Resets */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Merriweather:wght@300;400;700&family=Roboto+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  /* Palette */
  --body-bg-base: #f3f4f6;
  --paper-bg: #fefbf7;
  --paper-bg-rgb: 254, 251, 247;
  --text-color: #3e3e3e;
  --text-color-secondary: #4a4a4a;
  
  /* Dimensions */
  --nav-width: 85%;
  --max-width: 65rem;
  --slot-size: 1.25rem;
  --slot-gap: 0.05rem;
  --nav-font-size: 0.95rem;
  --nav-assembly-height: 60px;
  --content-hole-padding: 2.5rem;

  /* Animation Speeds */
  --read-head-move-speed: 0.04s; 
  --z-engage-speed: 0.02s;
  --char-flip-speed: 0.015s;
  --char-intermediate-flip-speed: 0.01s;
  --mechanism-fade-speed: 0.25s;
  --content-slide-speed: 0.2s;
  --vertical-hide-speed: 0.3s;

  /* Fonts */
  --font-body: 'Merriweather', Georgia, serif;
  --font-headline: 'EB Garamond', Georgia, serif;
  --font-mono: 'Roboto Mono', monospace;
  --font-sans: 'Inter', sans-serif;

  --minimal-ribbon-height: 1px;
  --minimal-ribbon-color: rgba(74, 74, 74, 0.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--body-bg-base);
  color: var(--text-color);
  overflow: hidden;
  line-height: 1.7;
}