/* CSS Custom Properties — single source of truth for all design tokens */
:root {
  /* Colors */
  --color-primary: #8B4513;
  --color-primary-dark: #654321;
  --color-primary-gradient: linear-gradient(135deg, #8B4513 0%, #654321 100%);
  --color-primary-shadow: rgba(139, 69, 19, 0.3);

  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-white: #ffffff;
  --color-text-white-muted: rgba(255, 255, 255, 0.9);

  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-border: #f0f0f0;
  --color-border-hover: #8B4513;

  /* Typography */
  --font-family: 'Poppins', sans-serif;
  --font-mono: 'Courier New', monospace;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 80px;

  /* Spacing */
  --section-padding: 5rem 0;
  --container-padding: 0 2rem;

  /* Shadows */
  --shadow-sm: 0 2px 20px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 12px 45px rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 15px rgba(139, 69, 19, 0.3);
  --shadow-primary-hover: 0 6px 20px rgba(139, 69, 19, 0.4);

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

  /* Border */
  --border: 2px solid var(--color-border);
  --border-hover: 2px solid var(--color-primary);
}