/* ===========================================
   CSS Variables - 亞東紀念醫院心臟血管外科
   Design System Variables
   =========================================== */

:root {
  /* ==================== 
     Site Brand Colors 網站品牌色彩
     ==================== */
  --site-brand-primary: #116098;          /* 主品牌色 - 深藍 */
  --site-brand-secondary: #249CF2;        /* 次品牌色 - 亮藍 */
  --site-brand-accent: #1c6ea5;           /* 強調色 - 中藍 */
  --site-brand-dark: #0a3957;             /* 深色變化 */
  --site-brand-light: #a8cbec;            /* 淺色變化 */
  
  /* ==================== 
     Site Semantic Colors 語意色彩
     ==================== */
  --site-primary: var(--site-brand-primary);
  --site-secondary: var(--site-brand-secondary);
  --site-success: #28a745;
  --site-warning: #ffc107;
  --site-danger: #dc3545;
  --site-info: #17a2b8;
  
  /* ==================== 
     Site Background Colors 背景色彩
     ==================== */
  --site-bg-primary: #ffffff;
  --site-bg-secondary: #f8f9fa;
  --site-bg-tertiary: #f1f7fd;            /* Footer 背景色 */
  --site-bg-dark: #333333;
  --site-bg-overlay: rgba(0, 0, 0, 0.5);
  --site-bg-overlay-light: rgba(255, 255, 255, 0.9);
  --site-bg-gradient: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  
  /* ==================== 
     Site Text Colors 文字色彩
     ==================== */
  --site-text-primary: #333333;
  --site-text-secondary: #666666;
  --site-text-muted: #999999;
  --site-text-light: #ffffff;
  --site-text-dark: #212529;
  --site-text-brand: var(--site-brand-primary);
  --site-text-copyright: #a3c9eb;
  
  /* ==================== 
     Site Border Colors 邊框色彩
     ==================== */
  --site-border-color: #dddddd;
  --site-border-light: rgba(255, 255, 255, 0.2);
  --site-border-dark: rgba(0, 0, 0, 0.1);
  --site-border-brand: var(--site-brand-light);
  
  /* ==================== 
     Site Shadow Colors 陰影色彩
     ==================== */
  --site-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --site-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --site-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --site-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.25);
  --site-shadow-news: 0px 2px 15px rgba(0, 0, 0, 0.4);
  
  /* ==================== 
     Site Interactive Colors 互動色彩
     ==================== */
  --site-link-color: var(--site-brand-primary);
  --site-link-hover: #092a3f;
  --site-link-active: #0056b3;
  --site-link-visited: #6f42c1;
  --site-link-light: var(--site-text-light);
  --site-link-light-hover: #ddd;
  
  /* ==================== 
     Site Button Colors 按鈕色彩
     ==================== */
  --site-btn-primary-bg: var(--site-brand-primary);
  --site-btn-primary-text: var(--site-text-light);
  --site-btn-primary-border: var(--site-brand-primary);
  --site-btn-primary-hover-bg: var(--site-brand-dark);
  --site-btn-primary-hover-text: var(--site-text-light);
  --site-btn-primary-hover-border: var(--site-brand-dark);
  
  --site-btn-secondary-bg: var(--site-brand-secondary);
  --site-btn-secondary-text: var(--site-text-light);
  --site-btn-secondary-border: var(--site-brand-secondary);
  --site-btn-secondary-hover-bg: #1e7cc2;
  --site-btn-secondary-hover-text: var(--site-text-light);
  --site-btn-secondary-hover-border: #1e7cc2;
  
  --site-btn-outline-bg: transparent;
  --site-btn-outline-text: var(--site-brand-primary);
  --site-btn-outline-border: var(--site-brand-primary);
  --site-btn-outline-hover-bg: var(--site-brand-primary);
  --site-btn-outline-hover-text: var(--site-text-light);
  --site-btn-outline-hover-border: var(--site-brand-primary);
  
  --site-btn-success-bg: var(--site-success);
  --site-btn-success-text: var(--site-text-light);
  --site-btn-success-border: var(--site-success);
  --site-btn-success-hover-bg: #218838;
  --site-btn-success-hover-text: var(--site-text-light);
  --site-btn-success-hover-border: #218838;
  
  --site-btn-warning-bg: var(--site-warning);
  --site-btn-warning-text: var(--site-text-dark);
  --site-btn-warning-border: var(--site-warning);
  --site-btn-warning-hover-bg: #e0a800;
  --site-btn-warning-hover-text: var(--site-text-dark);
  --site-btn-warning-hover-border: #e0a800;
  
  --site-btn-danger-bg: var(--site-danger);
  --site-btn-danger-text: var(--site-text-light);
  --site-btn-danger-border: var(--site-danger);
  --site-btn-danger-hover-bg: #c82333;
  --site-btn-danger-hover-text: var(--site-text-light);
  --site-btn-danger-hover-border: #c82333;
  
  --site-btn-light-bg: #f8f9fa;
  --site-btn-light-text: var(--site-text-dark);
  --site-btn-light-border: #f8f9fa;
  --site-btn-light-hover-bg: #e2e6ea;
  --site-btn-light-hover-text: var(--site-text-dark);
  --site-btn-light-hover-border: #e2e6ea;
  
  --site-btn-dark-bg: var(--site-bg-dark);
  --site-btn-dark-text: var(--site-text-light);
  --site-btn-dark-border: var(--site-bg-dark);
  --site-btn-dark-hover-bg: #1d2124;
  --site-btn-dark-hover-text: var(--site-text-light);
  --site-btn-dark-hover-border: #1d2124;
  
  /* ==================== 
     Site Component Specific 元件專用
     ==================== */
  --site-navbar-bg: var(--site-brand-primary);
  --site-navbar-text: var(--site-text-light);
  --site-hero-overlay: rgba(17, 96, 152, 0.7);
  --site-card-bg: var(--site-bg-primary);
  --site-card-border: var(--site-border-color);
  --site-news-bg: var(--site-bg-primary);
  --site-news-bg-alt: var(--site-brand-primary);
  --site-doctor-card-border: 3px solid #f8f9fa;
  
  /* ==================== 
     Site Swiper Colors 輪播色彩
     ==================== */
  --site-swiper-theme-color: var(--site-brand-primary);
  --site-swiper-pagination-color: var(--site-brand-primary);
  --site-swiper-navigation-color: var(--site-brand-primary);
  
  /* ==================== 
     Site Button Variables 按鈕變數
     ==================== */
  --site-btn-padding-y: var(--site-spacing-sm);
  --site-btn-padding-x: var(--site-spacing-lg);
  --site-btn-font-size: var(--site-font-size-base);
  --site-btn-font-weight: 500;
  --site-btn-line-height: 1.5;
  --site-btn-border-width: 1px;
  --site-btn-border-radius: var(--site-radius-md);
  --site-btn-transition: var(--site-transition-base);
  
  --site-btn-sm-padding-y: var(--site-spacing-xs);
  --site-btn-sm-padding-x: var(--site-spacing-md);
  --site-btn-sm-font-size: var(--site-font-size-sm);
  --site-btn-sm-border-radius: var(--site-radius-sm);
  
  --site-btn-lg-padding-y: var(--site-spacing-md);
  --site-btn-lg-padding-x: var(--site-spacing-xl);
  --site-btn-lg-font-size: var(--site-font-size-lg);
  --site-btn-lg-border-radius: var(--site-radius-lg);
  
  /* ==================== 
     Site Spacing Variables 間距變數
     ==================== */
  --site-spacing-xs: 0.25rem;   /* 4px */
  --site-spacing-sm: 0.5rem;    /* 8px */
  --site-spacing-md: 1rem;      /* 16px */
  --site-spacing-lg: 1.5rem;    /* 24px */
  --site-spacing-xl: 2rem;      /* 32px */
  --site-spacing-xxl: 3rem;     /* 48px */
  --site-spacing-3xl: 4rem;     /* 64px */
  
  /* ==================== 
     Site Typography Variables 字體變數
     ==================== */
  --site-font-family-primary: "Microsoft JhengHei", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --site-font-family-heading: var(--site-font-family-primary);
  --site-font-size-xs: 0.75rem;    /* 12px */
  --site-font-size-sm: 0.875rem;   /* 14px */
  --site-font-size-base: 1rem;     /* 16px */
  --site-font-size-lg: 1.125rem;   /* 18px */
  --site-font-size-xl: 1.25rem;    /* 20px */
  --site-font-size-2xl: 1.5rem;    /* 24px */
  --site-font-size-3xl: 1.875rem;  /* 30px */
  --site-font-size-4xl: 2rem;      /* 32px */
  --site-line-height-base: 1.8;
  
  /* ==================== 
     Site Border Radius 圓角變數
     ==================== */
  --site-radius-sm: 0.25rem;   /* 4px */
  --site-radius-md: 0.375rem;  /* 6px */
  --site-radius-lg: 0.5rem;    /* 8px */
  --site-radius-xl: 0.75rem;   /* 12px */
  --site-radius-2xl: 1rem;     /* 16px */
  --site-radius-full: 50%;
  --site-radius-card: 5px;
  --site-radius-news: 10px;
  
  /* ==================== 
     Site Transition Variables 過渡變數
     ==================== */
  --site-transition-fast: 0.15s ease-in-out;
  --site-transition-base: 0.3s ease-in-out;
  --site-transition-slow: 0.5s ease-in-out;
  --site-transition-hover: 0.3s ease;
  
  /* ==================== 
     Site Z-Index Variables 層級變數
     ==================== */
  --site-z-dropdown: 1000;
  --site-z-sticky: 1020;
  --site-z-fixed: 1030;
  --site-z-modal-backdrop: 1040;
  --site-z-modal: 1050;
  --site-z-popover: 1060;
  --site-z-tooltip: 1070;
  --site-z-news-block: 9;
  
  /* ==================== 
     Site Layout Variables 版面變數
     ==================== */
  --site-container-max-width: 1200px;
  --site-header-height: 60vh;
  --site-header-inner-height: 250px;
  --site-news-offset: -70px;
  --site-footer-padding: 60px 0;
}

/* ==================== 
   Site Dark Mode Variables 深色模式變數
   ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    --site-bg-primary: #1a1a1a;
    --site-bg-secondary: #2d2d2d;
    --site-text-primary: #ffffff;
    --site-text-secondary: #cccccc;
    --site-border-color: #404040;
    --site-card-bg: #2d2d2d;
  }
}

/* ==================== 
   Site Utility Classes 工具類別
   ==================== */
.site-text-primary { color: var(--site-text-primary) !important; }
.site-text-secondary { color: var(--site-text-secondary) !important; }
.site-text-light { color: var(--site-text-light) !important; }
.site-text-brand { color: var(--site-brand-primary) !important; }
.site-text-muted { color: var(--site-text-muted) !important; }

/* ==================== 
   Site Font Size Classes 字體大小類別
   ==================== */
.site-fs-xs { font-size: var(--site-font-size-xs) !important; }      /* 12px */
.site-fs-sm { font-size: var(--site-font-size-sm) !important; }      /* 14px */
.site-fs-base { font-size: var(--site-font-size-base) !important; }  /* 16px */
.site-fs-md { font-size: var(--site-font-size-base) !important; }    /* 16px - 別名 */
.site-fs-lg { font-size: var(--site-font-size-lg) !important; }      /* 18px */
.site-fs-xl { font-size: var(--site-font-size-xl) !important; }      /* 20px */
.site-fs-2xl { font-size: var(--site-font-size-2xl) !important; }    /* 24px */
.site-fs-3xl { font-size: var(--site-font-size-3xl) !important; }    /* 30px */
.site-fs-4xl { font-size: var(--site-font-size-4xl) !important; }    /* 32px */

/* 響應式字體大小類別 */
.site-fs-responsive-sm { 
  font-size: var(--site-font-size-sm) !important;
}
@media (min-width: 768px) {
  .site-fs-responsive-sm { 
    font-size: var(--site-font-size-base) !important; 
  }
}

.site-fs-responsive-md { 
  font-size: var(--site-font-size-base) !important;
}
@media (min-width: 768px) {
  .site-fs-responsive-md { 
    font-size: var(--site-font-size-lg) !important; 
  }
}

.site-fs-responsive-lg { 
  font-size: var(--site-font-size-lg) !important;
}
@media (min-width: 768px) {
  .site-fs-responsive-lg { 
    font-size: var(--site-font-size-xl) !important; 
  }
}

.site-fs-responsive-xl { 
  font-size: var(--site-font-size-xl) !important;
}
@media (min-width: 768px) {
  .site-fs-responsive-xl { 
    font-size: var(--site-font-size-2xl) !important; 
  }
}

/* 特殊用途字體大小 */
.site-fs-caption { font-size: 0.8rem !important; }     /* 說明文字 */
.site-fs-lead { font-size: 1.2rem !important; }        /* 引言文字 */
.site-fs-display { font-size: 2.5rem !important; }     /* 展示標題 */

/* 行高類別 */
.site-lh-1 { line-height: 1 !important; }
.site-lh-sm { line-height: 1.25 !important; }
.site-lh-base { line-height: var(--site-line-height-base) !important; }  /* 1.8 */
.site-lh-lg { line-height: 2 !important; }

.site-bg-brand-primary { background-color: var(--site-brand-primary) !important; }
.site-bg-brand-secondary { background-color: var(--site-brand-secondary) !important; }
.site-bg-overlay { background-color: var(--site-bg-overlay) !important; }
.site-bg-gradient { background: var(--site-bg-gradient) !important; }

.site-border-brand { border-color: var(--site-brand-primary) !important; }
.site-border-light { border-color: var(--site-border-light) !important; }

.site-shadow-sm { box-shadow: var(--site-shadow-sm) !important; }
.site-shadow-md { box-shadow: var(--site-shadow-md) !important; }
.site-shadow-lg { box-shadow: var(--site-shadow-lg) !important; }
.site-shadow-news { box-shadow: var(--site-shadow-news) !important; }

.site-transition-base { transition: var(--site-transition-base) !important; }
.site-transition-hover { transition: var(--site-transition-hover) !important; }

.site-radius-sm { border-radius: var(--site-radius-sm) !important; }
.site-radius-md { border-radius: var(--site-radius-md) !important; }
.site-radius-lg { border-radius: var(--site-radius-lg) !important; }
.site-radius-full { border-radius: var(--site-radius-full) !important; }

/* ==================== 
   Site Component Classes 元件類別
   ==================== */

/* 基礎按鈕樣式 */
.site-btn {
  display: inline-block;
  padding: var(--site-btn-padding-y) var(--site-btn-padding-x);
  font-size: var(--site-btn-font-size);
  font-weight: var(--site-btn-font-weight);
  line-height: var(--site-btn-line-height);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: var(--site-btn-border-width) solid transparent;
  border-radius: var(--site-btn-border-radius);
  transition: var(--site-btn-transition);
  user-select: none;
}

.site-btn:focus,
.site-btn:hover {
  text-decoration: none;
}

.site-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* 主要按鈕 */
.site-btn-primary {
  background-color: var(--site-btn-primary-bg);
  color: var(--site-btn-primary-text);
  border-color: var(--site-btn-primary-border);
}

.site-btn-primary:hover {
  background-color: var(--site-btn-primary-hover-bg);
  color: var(--site-btn-primary-hover-text);
  border-color: var(--site-btn-primary-hover-border);
}

/* 次要按鈕 */
.site-btn-secondary {
  background-color: var(--site-btn-secondary-bg);
  color: var(--site-btn-secondary-text);
  border-color: var(--site-btn-secondary-border);
}

.site-btn-secondary:hover {
  background-color: var(--site-btn-secondary-hover-bg);
  color: var(--site-btn-secondary-hover-text);
  border-color: var(--site-btn-secondary-hover-border);
}

/* 外框按鈕 */
.site-btn-outline {
  background-color: var(--site-btn-outline-bg);
  color: var(--site-btn-outline-text);
  border-color: var(--site-btn-outline-border);
}

.site-btn-outline:hover {
  background-color: var(--site-btn-outline-hover-bg);
  color: var(--site-btn-outline-hover-text);
  border-color: var(--site-btn-outline-hover-border);
}

/* 成功按鈕 */
.site-btn-success {
  background-color: var(--site-btn-success-bg);
  color: var(--site-btn-success-text);
  border-color: var(--site-btn-success-border);
}

.site-btn-success:hover {
  background-color: var(--site-btn-success-hover-bg);
  color: var(--site-btn-success-hover-text);
  border-color: var(--site-btn-success-hover-border);
}

/* 警告按鈕 */
.site-btn-warning {
  background-color: var(--site-btn-warning-bg);
  color: var(--site-btn-warning-text);
  border-color: var(--site-btn-warning-border);
}

.site-btn-warning:hover {
  background-color: var(--site-btn-warning-hover-bg);
  color: var(--site-btn-warning-hover-text);
  border-color: var(--site-btn-warning-hover-border);
}

/* 危險按鈕 */
.site-btn-danger {
  background-color: var(--site-btn-danger-bg);
  color: var(--site-btn-danger-text);
  border-color: var(--site-btn-danger-border);
}

.site-btn-danger:hover {
  background-color: var(--site-btn-danger-hover-bg);
  color: var(--site-btn-danger-hover-text);
  border-color: var(--site-btn-danger-hover-border);
}

/* 淺色按鈕 */
.site-btn-light {
  background-color: var(--site-btn-light-bg);
  color: var(--site-btn-light-text);
  border-color: var(--site-btn-light-border);
}

.site-btn-light:hover {
  background-color: var(--site-btn-light-hover-bg);
  color: var(--site-btn-light-hover-text);
  border-color: var(--site-btn-light-hover-border);
}

/* 深色按鈕 */
.site-btn-dark {
  background-color: var(--site-btn-dark-bg);
  color: var(--site-btn-dark-text);
  border-color: var(--site-btn-dark-border);
}

.site-btn-dark:hover {
  background-color: var(--site-btn-dark-hover-bg);
  color: var(--site-btn-dark-hover-text);
  border-color: var(--site-btn-dark-hover-border);
}

/* 按鈕尺寸變化 */
.site-btn-sm {
  padding: var(--site-btn-sm-padding-y) var(--site-btn-sm-padding-x);
  font-size: var(--site-btn-sm-font-size);
  border-radius: var(--site-btn-sm-border-radius);
}

.site-btn-lg {
  padding: var(--site-btn-lg-padding-y) var(--site-btn-lg-padding-x);
  font-size: var(--site-btn-lg-font-size);
  border-radius: var(--site-btn-lg-border-radius);
}

/* 區塊按鈕 */
.site-btn-block {
  display: block;
  width: 100%;
}

.site-button {
  background-color: var(--site-brand-primary);
  border-color: var(--site-brand-primary);
  color: var(--site-text-light);
  transition: var(--site-transition-base);
}

.site-button:hover {
  background-color: var(--site-brand-dark);
  border-color: var(--site-brand-dark);
}

.site-link {
  color: var(--site-link-color);
  text-decoration: none;
  transition: var(--site-transition-fast);
}

.site-link:hover {
  color: var(--site-link-hover);
}

.site-card {
  background-color: var(--site-card-bg);
  border: 1px solid var(--site-card-border);
  border-radius: var(--site-radius-card);
  box-shadow: var(--site-shadow-news);
  overflow: hidden;
}