/* ==========================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================== */
:root {
  /* Color Palette */
  --bg-color: #FFFFFF;
  --main-color: #127c54;
  --secondary-color: #06257E;
  --accent-color: #6541e0;
  --tag-color: #5D2F77;
  
  /* Text Colors */
  --text-color: #333;
  --text-medium: #383737;
  --text-blog-date :#0c0b0b;
  --text-light: #666;
  --text-lighter: #999;
  
  /* Border Colors */
  --border-color: #e0e0e0;
  --border-light: #f0f0f0;
  
  /* Interactive Colors */
  --hover-color: #2563eb;
  
  /* Typography */
  --font-heading: 'Outfit', Arial, sans-serif;
  --font-body: 'Fredoka', sans-serif;
  --font-mono: 'Raleway', sans-serif;
  
  /* Spacing System */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  
  /* Font Sizes */
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  /* Common incremental scale additions */
  --font-size-14: 0.875rem; /* 14px */
  --font-size-18: 1.125rem; /* 18px */
  --font-size-md: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-30: 1.875rem; /* 30px */
  --font-size-36: 2.25rem;  /* 36px */
  --font-size-xl: 2rem;
  --font-size-2xl: 2.5rem;
  --font-size-3xl: 3.5rem;
  
  /* Container Widths */
  --container-max: 78rem;
  --content-max: 900px;
  --content-wide: 900px;
}