/* ==========================================================================
   app/assets/stylesheets/_variables.css
   CSS CUSTOM PROPERTIES (VARIABLES) - SHARED ACROSS ALL COMPONENTS
   ========================================================================== */

:root {
  /* Colors */
  --primary-color: #2e8b57;
  --secondary-color: #f0f8f0;
  --user-color: #0097a7;
  --accent-color: #66c285;
  --text-color: #333;
  --bg-color: #f5f9f5;
  --light-gray: #e8f1e8;
  --white: #ffffff;
  
  /* Shadows */
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --avatar-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  /* Dimensions */
  --header-height: 50px;
  --avatar-size: 56px;
  --avatar-size-mobile: 44px;
  --send-button-size: 44px;
  --send-button-size-mobile: 38px;
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 18px;
  --border-radius-round: 24px;
  --border-radius-circle: 50%;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  
  /* Typography */
  --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-data: Verdana, Geneva, Tahoma, sans-serif;
  --font-size-sm: 12px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  
  /* Transitions */
  --transition-fast: 0.2s;
  --transition-medium: 0.3s;
}