/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Colors */
  --color-black: #1a1a1a;
  --color-white: #ffffff;
  --color-gray-light: #F1F1F1;
  --color-gray: #e0e0e0;
  --color-gray-medium: #999;
  --color-gray-dark: #555;
  --color-gray-border: #ddd;
  --color-gray-border-light: #eee;
  --color-green: #25D366;
  --color-red: #c0392b;
  --color-facebook: #1877F2;
  --color-twitter: #000000;

  /* Fonts */
  --font-heading: 'Raleway', sans-serif;
  --font-body: 'Avenir Light', 'Raleway', sans-serif;
  --font-hebrew: 'Assistant', sans-serif;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 80px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --header-height: 70px;
}