/* ========================================
   DINNER THEME VARIABLES
   Evening conversation: Smoky, subdued, 
   candlelit ambiance with deep reds
   ======================================== */
:root {
/* ===== COLOR PALETTE ===== */
/* Background & Surfaces */
--body-bg-image: url('../imgs/dinner/dinner_BG004.gif');
/* --body-bg-color: #1a0f0f; */
--wrapper-bg: #faf5f0;
--wrapper-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
/* Typography */
--text-primary: #2b1810;
--text-secondary: #6b4e3d;
--text-muted: #8b7355;
--heading-color: #3d2317;
--link-color: #b84a4a;
--link-hover: #d65555;
/* Speaker Blocks */
--gil-bg: #fff8e7;
--gil-border: rgba(139, 58, 58, 0.15);
--gil-text: #2b1810;
--zeke-bg: #f5ebe0;
--zeke-border: rgba(75, 85, 99, 0.15);
--zeke-text: #1a1410;
/* UI Elements */
--timestamp-color: #8b7355;
--nav-bg: rgba(45, 30, 25, 0.95);
--nav-text: #f5e6d3;
--nav-hover: rgba(139, 58, 58, 0.3);
--nav-border: #6b4e3d;
--menu-button-bg: rgba(45, 30, 25, 0.85);
/* Pinned coffee link */
--pinned-bg: transparent;
--pinned-text: #6b4e3d;
--pinned-link: #b84a4a;
--pinned-hover-bg: var(--zeke-bg);
--pinned-hover-text: #2b1810;
/* List/Nav styling */
--list-border-light: rgba(107, 78, 61, 0.2);
--list-border-dark: rgba(107, 78, 61, 0.4);
--list-hover-bg: rgba(139, 58, 58, 0.08);
--list-hover-color: #b84a4a;
/* Footer */
--footer-border: rgba(107, 78, 61, 0.3);
--footer-text: #6b4e3d;
--footer-link: #b84a4a;
/* ===== TYPOGRAPHY ===== */
/* Base font - used for headers, body, narrator text */
--font-base: Georgia, 'Times New Roman', serif;
/* Speaker-specific fonts */
--font-gil: 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
--font-zeke: 'Courier New', Courier, monospace;
/* Secondary/utility font */
--font-secondary: 'Palatino Linotype', Palatino, serif;
/* ===== SPACING & RHYTHM ===== */
--content-max-width: 45em;
--wrapper-radius: 1.2em;
--speaker-radius: 0.8em;
/* ===== LINE HEIGHT ===== */
--line-height-tight: 1.3;
--line-height-base: 1.65;
--line-height-relaxed: 1.8;
}
/* ========== BODY STYLES (DINNER THEME) ========== */
body {
background-image: var(--body-bg-image);
background-repeat: repeat;
background-position: top left;
/* background-color: #1a0f0f; */
padding: 1em 0.75em;
}