/* ============================================================
   COLOREX — BRAND COLOR TOKENS
   ============================================================
   Nguồn sự thật duy nhất cho màu sắc toàn site.

   Cấu trúc:
   - Variables: định nghĩa màu
   - Navbar: style dùng biến (đọc từ nav.json qua inline style)
   - Override Bootstrap: map bg-warning → brand variable

   ⚠️ Đổi màu ở ĐÂY, toàn site đổi theo.
   ============================================================ */

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
  /* ---------- BRAND PRIMARY — CAM ---------- */
  --brand-primary:          #F85922;
  --brand-primary-rgb:      248, 89, 34;
  --brand-primary-dark:     #d9481a;
  --brand-primary-darker:   #b83b12;
  --brand-primary-light:    #ff7a4d;
  --brand-primary-lighter:  #ffe4d9;
  --brand-primary-bg:       #fff5f0;
  --brand-primary-border:   #ffe2d4;

  /* ---------- BRAND NAVBAR — VÀNG ---------- */
  --brand-navbar-bg:         #FFC107;
  --brand-navbar-bg-rgb:     255, 193, 7;
  --brand-navbar-bg-hover:   #FFCA2C;
  --brand-navbar-bg-active:  #FFB300;
  --brand-navbar-text:       #212529;
  --brand-navbar-text-hover: #212529;

  /* ---------- NEUTRAL ---------- */
  --color-text:          #212529;
  --color-text-muted:    #6c757d;
  --color-text-light:    #adb5bd;
  --color-text-heading:  #333;
  --color-bg:            #ffffff;
  --color-bg-alt:        #f8f9fa;
  --color-bg-muted:      #f5f5f5;
  --color-border:        #dee2e6;
  --color-border-light:  #e9ecef;
  --color-border-muted:  #e0e0e0;

  /* ---------- SEMANTIC ---------- */
  --color-primary:         var(--brand-primary);
  --color-primary-hover:   var(--brand-primary-dark);
  --color-primary-active:  var(--brand-primary-darker);
  --color-primary-bg:      var(--brand-primary-lighter);

  /* ---------- DANGER (hotline khẩn cấp) ---------- */
  --color-danger:          #ff0000;
  --color-danger-hover:    #cc0000;
}

/* ============================================================
   2. NAVBAR — đọc biến từ nav.json
   ============================================================ */

nav.navbar {
  background-color: var(--nav-bg, var(--brand-navbar-bg));
  color: var(--nav-color, var(--brand-navbar-text));
  border: var(--nav-border, none);
  border-radius: var(--nav-radius, 0);
  transition: var(--nav-transition, all 0.3s ease);
  opacity: var(--nav-opacity, 1);
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

nav.navbar:hover {
  opacity: var(--nav-hover-opacity, 1);
}

nav.navbar .nav-link {
  color: var(--nav-color, var(--brand-navbar-text));
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 50px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

nav.navbar .nav-link:hover,
nav.navbar .nav-link.active {
  background-color: var(--nav-hover-bg, var(--brand-navbar-bg-hover));
  color: var(--nav-hover-color, var(--brand-navbar-text-hover));
  border-radius: 50px;
}

nav.navbar .nav-item {
  margin: 4px;
}

nav.navbar .btn-light {
  background-color: #ffffff;
  border-color: #ffffff;
  font-weight: bold;
}

nav.navbar .btn-light:hover {
  background-color: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
}

/* ============================================================
   3. FOOTER — đọc biến từ footer.json
   ============================================================ */

.footer-main {
  background-color: var(--ft-bg, var(--brand-navbar-bg));
  color: var(--ft-color, #212529);
  opacity: var(--ft-opacity, 1);
  transition: opacity 0.3s ease;  
}

.footer-main:hover {
  opacity: var(--ft-hover-opacity, 1);
}

.footer-main a,
.footer-main .list-group-item {
  color: var(--ft-link-color, #212529);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.footer-main a:hover,
.footer-main .list-group-item:hover {
  color: var(--ft-link-hover-color, #000);
  background-color: var(--ft-link-hover-bg, rgba(0, 0, 0, 0.05));
}

.footer-main hr {
  border-color: var(--ft-color, #212529);
  opacity: 0.3;
}