/* ==========================================================================
   COLOR CONFIGURATION & PALETTE
   ==========================================================================
   Edit these CSS variables below to change your site's color scheme anytime!
   ========================================================================== */

:root {
  /* Layout Dimensions */
  --max-width: 680px;           /* Centered column max width matching darioamodei.com */

  /* Page Background */
  --bg-color: #faf9f6;          /* Off-white warm paper background */

  /* Text Colors */
  --text-primary: #1a1a1a;      /* Primary text color */
  --text-muted: #666666;        /* Subtitles & metadata date color */
  --heading-color: #111111;     /* Heading title color */

  /* Link & Accent Colors */
  --link-color: #0055d4;       /* Hyperlink accent color */
  --link-hover: #003db3;       /* Link hover state */

  /* Dividers & Borders */
  --border-color: #e5e5e7;     /* Subtle horizontal line dividers */
  --modal-bg: #ffffff;         /* Background color for article modal popups */
  
  /* Fonts */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Dark Mode Color Palette */
[data-theme="dark"] {
  --bg-color: #0d1117;          /* Sleek GitHub dark paper background */
  --text-primary: #e6edf3;      /* Crisp light primary text */
  --text-muted: #8b949e;        /* Subtitles & metadata muted text */
  --heading-color: #f0f6fc;     /* Heading title color */
  --link-color: #4493f8;       /* Vibrant blue accent link */
  --link-hover: #79c0ff;       /* Link hover state */
  --border-color: #30363d;     /* Subtle dark dividers */
  --modal-bg: #161b22;         /* Dark mode article modal background */
}