/* 潤其建設品牌色彩系統 */
:root {
  /* 主品牌色 - 金色系 */
  --brand-primary-50: #fefbf3;
  --brand-primary-100: #fef6e7;
  --brand-primary-200: #fce9c4;
  --brand-primary-300: #f9d899;
  --brand-primary-400: #f5c464;
  --brand-primary-500: #f1af39;
  --brand-primary-600: #e39a1f;
  --brand-primary-700: #C1892A;
  --brand-primary-800: #9d6d1a;
  --brand-primary-900: #7d541a;

  /* 中性色系 */
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;

  /* 語義化顏色 */
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-border: var(--neutral-200);
  --color-border-light: var(--brand-primary-100);
  
  /* 文字顏色 */
  --color-text-primary: var(--neutral-800);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted: var(--neutral-500);
  --color-text-brand: var(--brand-primary-700);
  
  /* 按鈕顏色 */
  --color-button-primary: var(--brand-primary-700);
  --color-button-primary-hover: var(--brand-primary-800);
  --color-button-secondary: var(--color-background);
  --color-button-secondary-hover: var(--brand-primary-50);
  --color-button-secondary-text: var(--brand-primary-700);
  --color-button-secondary-border: var(--brand-primary-200);
  
  /* 互動狀態 */
  --color-hover: var(--brand-primary-700);
  --color-focus-ring: var(--brand-primary-500);
  --color-focus-border: var(--brand-primary-500);
  
  /* 標籤和徽章 */
  --color-tag-background: var(--brand-primary-100);
  --color-tag-text: var(--brand-primary-800);
  
  /* 卡片和容器 */
  --color-card-background: var(--color-background);
  --color-card-border: var(--neutral-100);
  --color-card-hover-shadow: rgba(0, 0, 0, 0.1);
  
  /* 載入動畫 */
  --color-spinner: var(--brand-primary-600);
  
  /* 漸變背景 */
  --gradient-brand: linear-gradient(135deg, var(--brand-primary-400), var(--brand-primary-600));
  --gradient-placeholder: linear-gradient(135deg, var(--brand-primary-100), var(--brand-primary-200));
  
  /* 錯誤狀態 */
  --color-error-background: #fef2f2;
  --color-error-border: #fecaca;
  --color-error-text: #dc2626;
  --color-error-button: #dc2626;
  --color-error-button-hover: #b91c1c;
}

/* 深色模式支援（可選） */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--neutral-900);
    --color-surface: var(--neutral-800);
    --color-border: var(--neutral-700);
    --color-text-primary: var(--neutral-100);
    --color-text-secondary: var(--neutral-300);
    --color-text-muted: var(--neutral-400);
  }
}

/* 輔助 CSS 類別 */
.text-brand { color: var(--color-text-brand); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }

.bg-brand { background-color: var(--color-button-primary); }
.bg-surface { background-color: var(--color-surface); }
.bg-background { background-color: var(--color-background); }

.border-light { border-color: var(--color-border-light); }
.border-default { border-color: var(--color-border); }

.btn-primary {
  background-color: var(--color-button-primary);
  color: white;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--color-button-primary-hover);
}

.btn-secondary {
  background-color: var(--color-button-secondary);
  color: var(--color-button-secondary-text);
  border: 1px solid var(--color-button-secondary-border);
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--color-button-secondary-hover);
}

.tag {
  background-color: var(--color-tag-background);
  color: var(--color-tag-text);
}

.card {
  background-color: var(--color-card-background);
  border: 1px solid var(--color-card-border);
}

.spinner {
  border-color: transparent transparent var(--color-spinner) transparent;
}