:root {

  /* ========================================
     BRAND
  ======================================== */

  --site-primary: #0055cc;
  --site-secondary: #f5f5f5;
  --site-accent: #ff6b6b;

  --site-background: #ffffff;
  --site-surface: #f8f8f8;

  --site-text: #222222;
  --site-text-light: #666666;

  --site-border: #dddddd;

  /* ========================================
     TYPOGRAPHY
  ======================================== */

  --site-font-heading: Georgia, serif;
  --site-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --site-font-size-h1: 3rem;
  --site-font-size-h2: 2.5rem;
  --site-font-size-h3: 2rem;
  --site-font-size-h4: 1.5rem;
  --site-font-size-h5: 1.25rem;
  --site-font-size-h6: 1.125rem;

  --site-font-size-body: 1rem;
  --site-font-size-small: 0.875rem;

  --site-line-height-heading: 1.2;
  --site-line-height-body: 1.7;

  /* ========================================
     LAYOUT
  ======================================== */

  --site-content-width: 1200px;
  --site-content-narrow: 800px;
  --site-section-spacing: 6rem;
  --site-header-height: 90px;

  /* ========================================
     SPACING
  ======================================== */

  --site-space-xs: 0.5rem;
  --site-space-sm: 1rem;
  --site-space-md: 2rem;
  --site-space-lg: 4rem;
  --site-space-xl: 6rem;

  /* ========================================
     BORDERS
  ======================================== */

  --site-border-width: 1px;

  --site-radius-sm: 6px;
  --site-radius-md: 12px;
  --site-radius-lg: 20px;
  --site-radius-pill: 999px;

  /* ========================================
     SHADOWS
  ======================================== */

  --site-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --site-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --site-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.18);

  /* ========================================
     ANIMATION
  ======================================== */

  --site-transition-fast: 0.2s ease;
  --site-transition: 0.3s ease;
  --site-transition-slow: 0.5s ease;

  /* ========================================
     Z-INDEX
  ======================================== */

  --site-z-dropdown: 100;
  --site-z-sticky: 500;
  --site-z-header: 1000;
  --site-z-overlay: 9000;
  --site-z-modal: 9999;

}