:root {
  /* Brand Colors */
  --doist-red: #de4c4a;
  --doist-text: #202020;
  --doist-bg: #fcfcfc;
  --doist-gray-light: #e0e0e0;
  --doist-gray-medium: #666666;
  --white: #ffffff;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 40px;
  --spacing-2xl: 60px;
  
  /* Timeline Specific */
  --timeline-line-width: 3px;
  --timeline-marker-size: 16px;
  --timeline-marker-border: 3px;
  --timeline-max-width: 1000px;
  --timeline-arrow-size: 10px;
  --timeline-arrow-offset: 52px;
  --timeline-card-top-offset: 28px;
  --timeline-marker-top: 24px;
  
  /* Shadows */
  --shadow-light: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-medium: 0 4px 8px rgba(0,0,0,0.08);
  --shadow-hover: 0 10px 20px rgba(0,0,0,0.08);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  
  /* Typography */
  --font-family: 'Inter', sans-serif;
  
  /* Mobile Breakpoints */
  --mobile-timeline-offset: 20px;
  --mobile-arrow-offset: 12px;
}