/**
 * OLEA Medical Center - CSS Brand Variables
 * Version: 1.0 | March 2026
 * 
 * Usage: Import this file or copy variables to your main CSS/SCSS file
 * @import url('brand/css/brand-variables.css');
 */

:root {
  /* ===========================================
   * PRIMARY BRAND COLORS
   * =========================================== */
  
  /* Verde Olivo - Main brand color */
  --olea-primary: #6C7040;
  --olea-primary-rgb: 108, 112, 64;
  
  /* Oro Arena - Secondary/accent color */
  --olea-secondary: #AE9858;
  --olea-secondary-rgb: 174, 152, 88;
  
  /* ===========================================
   * SUPPORT COLORS
   * =========================================== */
  
  /* Verde Olivo Oscuro - Text, borders */
  --olea-primary-dark: #676A3D;
  --olea-primary-dark-rgb: 103, 106, 61;
  
  /* Neutrals */
  --olea-white: #FFFFFF;
  --olea-gray-light: #F5F5F5;
  --olea-gray-medium: #E0E0E0;
  --olea-gray-dark: #333333;
  --olea-black: #000000;
  
  /* ===========================================
   * FUNCTIONAL COLORS (UI/UX)
   * =========================================== */
  
  --olea-success: #4CAF50;
  --olea-success-rgb: 76, 175, 80;
  
  --olea-warning: #FF9800;
  --olea-warning-rgb: 255, 152, 0;
  
  --olea-error: #F44336;
  --olea-error-rgb: 244, 67, 54;
  
  --olea-info: #2196F3;
  --olea-info-rgb: 33, 150, 243;
  
  /* ===========================================
   * TYPOGRAPHY
   * =========================================== */
  
  /* Font Family */
  --olea-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  
  /* Font Weights */
  --olea-font-weight-light: 300;
  --olea-font-weight-regular: 400;
  --olea-font-weight-medium: 500;
  --olea-font-weight-semibold: 600;
  --olea-font-weight-bold: 700;
  --olea-font-weight-extrabold: 800;
  
  /* Font Sizes */
  --olea-font-size-xs: 0.75rem;    /* 12px */
  --olea-font-size-sm: 0.875rem;   /* 14px */
  --olea-font-size-base: 1rem;     /* 16px */
  --olea-font-size-lg: 1.125rem;   /* 18px */
  --olea-font-size-xl: 1.25rem;    /* 20px */
  --olea-font-size-2xl: 1.5rem;    /* 24px */
  --olea-font-size-3xl: 1.875rem;  /* 30px */
  --olea-font-size-4xl: 2.25rem;   /* 36px */
  --olea-font-size-5xl: 3rem;      /* 48px */
  
  /* Line Heights */
  --olea-line-height-tight: 1.25;
  --olea-line-height-normal: 1.5;
  --olea-line-height-relaxed: 1.75;
  
  /* ===========================================
   * SPACING
   * =========================================== */
  
  --olea-spacing-xs: 0.25rem;   /* 4px */
  --olea-spacing-sm: 0.5rem;    /* 8px */
  --olea-spacing-md: 1rem;      /* 16px */
  --olea-spacing-lg: 1.5rem;    /* 24px */
  --olea-spacing-xl: 2rem;      /* 32px */
  --olea-spacing-2xl: 3rem;     /* 48px */
  --olea-spacing-3xl: 4rem;     /* 64px */
  
  /* ===========================================
   * BORDERS & RADIUS
   * =========================================== */
  
  --olea-border-radius-sm: 4px;
  --olea-border-radius-md: 8px;
  --olea-border-radius-lg: 12px;
  --olea-border-radius-full: 9999px;
  
  --olea-border-width: 1px;
  --olea-border-width-thick: 2px;
  
  /* ===========================================
   * SHADOWS
   * =========================================== */
  
  --olea-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --olea-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --olea-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --olea-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
  /* ===========================================
   * TRANSITIONS
   * =========================================== */
  
  --olea-transition-fast: 150ms ease;
  --olea-transition-normal: 300ms ease;
  --olea-transition-slow: 500ms ease;
  
  /* ===========================================
   * Z-INDEX SCALE
   * =========================================== */
  
  --olea-z-dropdown: 100;
  --olea-z-sticky: 200;
  --olea-z-fixed: 300;
  --olea-z-modal-backdrop: 400;
  --olea-z-modal: 500;
  --olea-z-tooltip: 600;
}

/* ===========================================
 * BOOTSTRAP INTEGRATION
 * Override Bootstrap variables with OLEA brand
 * =========================================== */

:root {
  /* Bootstrap Primary */
  --bs-primary: var(--olea-primary);
  --bs-primary-rgb: var(--olea-primary-rgb);
  
  /* Bootstrap Secondary */
  --bs-secondary: var(--olea-secondary);
  --bs-secondary-rgb: var(--olea-secondary-rgb);
  
  /* Bootstrap Functional */
  --bs-success: var(--olea-success);
  --bs-success-rgb: var(--olea-success-rgb);
  --bs-warning: var(--olea-warning);
  --bs-warning-rgb: var(--olea-warning-rgb);
  --bs-danger: var(--olea-error);
  --bs-danger-rgb: var(--olea-error-rgb);
  --bs-info: var(--olea-info);
  --bs-info-rgb: var(--olea-info-rgb);
  
  /* Bootstrap Body */
  --bs-body-font-family: var(--olea-font-family);
  --bs-body-color: var(--olea-gray-dark);
  --bs-body-bg: var(--olea-white);
  
  /* Bootstrap Links */
  --bs-link-color: var(--olea-primary);
  --bs-link-hover-color: var(--olea-primary-dark);
}

/* ===========================================
 * UTILITY CLASSES
 * =========================================== */

/* Brand Colors - Backgrounds */
.bg-olea-primary { background-color: var(--olea-primary) !important; }
.bg-olea-secondary { background-color: var(--olea-secondary) !important; }
.bg-olea-primary-dark { background-color: var(--olea-primary-dark) !important; }
.bg-olea-light { background-color: var(--olea-gray-light) !important; }

/* Brand Colors - Text */
.text-olea-primary { color: var(--olea-primary) !important; }
.text-olea-secondary { color: var(--olea-secondary) !important; }
.text-olea-primary-dark { color: var(--olea-primary-dark) !important; }

/* Brand Colors - Borders */
.border-olea-primary { border-color: var(--olea-primary) !important; }
.border-olea-secondary { border-color: var(--olea-secondary) !important; }