/**
 * Epiphanie Design Tokens
 * Extracted from existing site and modernized for Bootstrap 5
 * These tokens maintain brand identity while enabling modern design patterns
 */

:root {
  /* Brand Colors */
  --ep-blue: #004080;
  --ep-blue-light: #B5DAFF;
  --ep-blue-dark: #002d5c;
  --ep-blue-hover: #0059b3;
  
  /* Background Colors */
  --ep-bg-base: #fffef0;
  --ep-bg-white: #ffffff;
  --ep-bg-light: #f8f9fa;
  --ep-bg-disabled: #b5c0ca;
  
  /* Text Colors */
  --ep-text-primary: #000000;
  --ep-text-secondary: #666666;
  --ep-text-muted: #6c757d;
  --ep-text-link: #004080;
  --ep-text-link-hover: #0059b3;
  --ep-text-footer: #666666;
  
  /* Semantic Colors */
  --ep-success-bg: #d1e7dd;
  --ep-success-text: #0f5132;
  --ep-success-border: #badbcc;
  --ep-error-bg: #f8d7da;
  --ep-error-text: #842029;
  --ep-error-border: #f5c2c7;
  
  /* Border Colors */
  --ep-border-default: #dee2e6;
  --ep-border-button: #666666;
  --ep-border-focus: #004080;
  
  /* Spacing Scale (Bootstrap 5 compatible) */
  --ep-spacing-xs: 0.25rem;   /* 4px */
  --ep-spacing-sm: 0.5rem;    /* 8px */
  --ep-spacing-md: 1rem;      /* 16px */
  --ep-spacing-lg: 1.5rem;    /* 24px */
  --ep-spacing-xl: 2rem;      /* 32px */
  --ep-spacing-2xl: 3rem;     /* 48px */
  
  /* Typography */
  --ep-font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ep-font-size-base: 1rem;      /* 16px */
  --ep-font-size-sm: 0.875rem;    /* 14px */
  --ep-font-size-lg: 1.125rem;    /* 18px */
  --ep-font-size-xl: 1.25rem;     /* 20px */
  --ep-font-weight-normal: 400;
  --ep-font-weight-bold: 700;
  
  /* Shadows */
  --ep-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ep-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ep-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Border Radius */
  --ep-radius-sm: 0.25rem;    /* 4px */
  --ep-radius-md: 0.375rem;   /* 6px */
  --ep-radius-lg: 0.5rem;     /* 8px */
  
  /* Transitions */
  --ep-transition-base: all 0.2s ease-in-out;
  --ep-transition-colors: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  
  /* Z-index Scale */
  --ep-z-dropdown: 1000;
  --ep-z-sticky: 1020;
  --ep-z-fixed: 1030;
  --ep-z-modal-backdrop: 1040;
  --ep-z-modal: 1050;
}

/* Bootstrap 5 Variable Overrides */
:root {
  --bs-primary: var(--ep-blue);
  --bs-primary-rgb: 0, 64, 128;
  --bs-link-color: var(--ep-text-link);
  --bs-link-hover-color: var(--ep-text-link-hover);
  --bs-body-bg: var(--ep-bg-base);
  --bs-body-color: var(--ep-text-primary);
  --bs-body-font-family: var(--ep-font-family);
  --bs-border-color: var(--ep-border-default);
  --bs-border-radius: var(--ep-radius-md);
}