/* ============================================================
   bootstrap-reskin.css  —  โหลดหลัง bootstrap.min.css
   โปรเจกต์: ระบบคาร์แคร์ / ล้างรถ
   ธีม "wet detailing bay": teal/aqua (น้ำ/สะอาด) + amber (CTA)
   *** แก้เฉพาะ SECTION 1 (สี) เท่านั้น ***
   ============================================================ */

/* ===== SECTION 1: COLOR TOKENS ===== */
:root {
  /* กลยุทธ์สี — teal = น้ำ/ความสะอาด, cyan = ความเงาโครเมียม, amber = CTA อุ่นตัดกับโทนเย็น */
  --cc-primary:        oklch(0.58 0.098 202);
  --cc-primary-hover:  oklch(0.51 0.10 202);
  --cc-primary-tint:   oklch(0.96 0.021 202);
  --cc-accent:         oklch(0.76 0.135 66);
  --cc-accent-hover:   oklch(0.69 0.145 66);
  --cc-ink:            oklch(0.29 0.028 226);
  --cc-muted:          oklch(0.55 0.022 226);
  --cc-bg:             oklch(0.985 0.006 210);
  --cc-surface:        #ffffff;
  --cc-border:         oklch(0.905 0.012 220);
  --cc-success:        oklch(0.66 0.13 155);
  --cc-warning:        oklch(0.80 0.13 82);
  --cc-danger:         oklch(0.60 0.17 27);
  --cc-info:           oklch(0.70 0.10 232);

  /* rgb fallback สำหรับ rgba() ที่ Bootstrap ใช้ (ค่าประมาณจาก token) */
  --cc-primary-rgb: 20, 132, 148;
  --cc-accent-rgb: 214, 149, 58;

  /* ===== map เข้าตัวแปร Bootstrap 5.3 ===== */
  --bs-primary: var(--cc-primary);
  --bs-primary-rgb: var(--cc-primary-rgb);
  --bs-body-bg: var(--cc-bg);
  --bs-body-color: var(--cc-ink);
  --bs-secondary-color: var(--cc-muted);
  --bs-border-color: var(--cc-border);
  --bs-link-color: var(--cc-primary);
  --bs-link-color-rgb: var(--cc-primary-rgb);
  --bs-link-hover-color: var(--cc-primary-hover);
  --bs-success: var(--cc-success);
  --bs-warning: var(--cc-warning);
  --bs-danger: var(--cc-danger);
  --bs-info: var(--cc-info);
}

.btn-primary {
  --bs-btn-bg: var(--cc-primary);
  --bs-btn-border-color: var(--cc-primary);
  --bs-btn-hover-bg: var(--cc-primary-hover);
  --bs-btn-hover-border-color: var(--cc-primary-hover);
  --bs-btn-active-bg: var(--cc-primary-hover);
  --bs-btn-active-border-color: var(--cc-primary-hover);
  --bs-btn-disabled-bg: var(--cc-primary);
  --bs-btn-disabled-border-color: var(--cc-primary);
  --bs-btn-focus-shadow-rgb: var(--cc-primary-rgb);
}

/* ปุ่ม CTA อุ่น (amber) — ใช้กับปุ่มลงมือหลัก เช่น รับรถเข้าคิว/ชำระเงิน */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cc-accent);
  --bs-btn-border-color: var(--cc-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cc-accent-hover);
  --bs-btn-hover-border-color: var(--cc-accent-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cc-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--cc-accent-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--cc-primary);
  --bs-btn-border-color: var(--cc-primary);
  --bs-btn-hover-bg: var(--cc-primary);
  --bs-btn-hover-border-color: var(--cc-primary);
  --bs-btn-active-bg: var(--cc-primary);
  --bs-btn-active-border-color: var(--cc-primary);
}

.text-primary { color: var(--cc-primary) !important; }
.bg-primary { background-color: var(--cc-primary) !important; }
.text-bg-primary { background-color: var(--cc-primary) !important; color: #fff !important; }
.badge.text-bg-primary { background-color: var(--cc-primary) !important; }
.link-primary { color: var(--cc-primary) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--cc-primary-rgb), 0.20);
}
.form-check-input:checked { background-color: var(--cc-primary); border-color: var(--cc-primary); }
.page-link { color: var(--cc-primary); }
.active > .page-link, .page-link.active { background-color: var(--cc-primary); border-color: var(--cc-primary); }
.nav-pills .nav-link.active { background-color: var(--cc-primary); }
/* ===== จบ SECTION 1 ===== */