/* ==========================================================================
  Backend developers can easily customize these values to change the
  branding, colors, status themes, or typography sizes dynamically at runtime!
  ========================================================================== */

:root {
  /* ======= color base ========== */
  --color-theme-v1: #b78443; /* màu chủ đạo */
  --color-theme-v2: #BE8033;  /* dùng cho text heading */
  --color-theme-v3: #987C57; /* dùng cho text desc */
  --color-theme-v4: #AB6F31; /* dùng ds service trên banner */
  --color-theme-v5: #8B6C43;/* dùng cho text heading v2 */
  --color-theme-v6: #D8CCBF; /* dùng bg section lật và footer */
  --color-theme-v7: #CEBFB3; /* dùng cho input chọn dịch vụ */
  --color-theme-v8: #835C3D; /* dùng cho section quote */
  --color-theme-v9 : #9C8A7C;
  --color-section-v1 : #F7F2ED;
  --color-section-v2 : #E8DED5;

  --color-body: #e8f0e6;
  --color-section: #f4faf2;
  --color-gray-color: #a3a3a3;
  --color-primary-foreground: #ffffff;

  --color-secondary-color: #fcbe04; /* Vàng tươi nổi bật */
  --color-secondary-hover: #e0a800; /* Hover – đậm hơn một chút */
  --color-secondary-foreground: #1a1a1a; /* Text tối để đủ tương phản trên nền vàng */

  /* ===== Status Colors ===== */
  --color-success-color: #1fbd0a;
  --color-success-foreground: #ffffff;

  --color-warning-color: #f59e0b;
  --color-warning-foreground: #000000;

  --color-error-color: #9e0b0f;
  --color-error-foreground: #ffffff;

  --color-info-color: #0ea5e9;
  --color-info-foreground: #ffffff;

  /* ===== Neutral Colors ===== */
  --color-text-muted-color: #64748b;
  --color-disabled-color: #9a9a9a;

  /* ===== Unified Border Radius ===== */
  --app-radius: 8px; /* xl size (0.75rem = 12px) */

  /* ===== Input UI Components ===== */
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-focus-bg: #ffffff;
  --input-focus-ring: rgba(52, 103, 44, 0.08);
  --input-radius: var(--app-radius);
  --input-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Hero Search Bar Colors ===== */
  --hero-search-bg: #ffffff;
  --hero-search-border: #e2e8f0;
  --hero-search-primary: #34672c;
  --hero-search-primary-hover: #28541f;
  --hero-search-icon: #34672c;
  --hero-search-divider: #d1e8cc;
}