/* === CSS Custom Properties === */
/* Foundation file — load FIRST in every HTML page */

:root {
  /* Brand Colors */
  --color-brand-red: #C61010;
  --color-brand-red-hover: #9B0D0D;

  /* Text Colors */
  --color-text-primary: #1A1A1A;
  --color-text-editorial: #555555;
  --color-text-meta: #4A4A4A;
  --color-text-callout: #000000;

  /* Background Colors */
  --color-bg-white: #FFFFFF;
  --color-bg-light: #F9F9F9;
  --color-bg-warm: #FDF9F7;

  /* Border Colors */
  --color-border-light: #EEEEEE;
  --color-border-medium: #CCCCCC;
  --color-border-dark: #DDDDDD;

  /* Typography */
  --font-serif: 'Libre Baskerville', serif;
  --font-sans: 'Lato', sans-serif;
  --font-cursive: 'Italianno', cursive;

  /* Layout */
  --max-width-content: 680px;
  --max-width-wide: 1100px;
  --max-width-grid: 1200px;

  /* Breakpoints (for reference — can't use in media queries) */
  /* Mobile: 600px, Tablet: 768px, Desktop: 900px */

  /* Transitions */
  --transition-default: 0.3s ease;

  /* Shadows */
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-subtle: 0 0 25px rgba(0, 0, 0, 0.04);
}

/* Global box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}