@import url('https://fonts.googleapis.com/css2?family=Chau+Philomene+One:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');

:root {
  /* fonts */
  --dtb-font-primary: 'Chau Philomene One', sans-serif;
  --dtb-font-secondary: 'Didact Gothic', sans-serif;

  /* colors */
  --dtb-primary: #FF7722;
  --dtb-primary-rgb: 255, 119, 34;
  --dtb-secondary: #002F44;
  --dtb-secondary-rgb: 0, 47, 68;
  --dtb-aux: #FFFFFF;
  --dtb-aux-rgb: 255, 255, 255;

  /* UI variables */
  --dtb-btn-color: var(--dtb-aux);
  --dtb-btn-bg: var(--dtb-primary);
  --dtb-btn-border-radius: 0.6em;
  --dtb-hover: var(--dtb-primary); 
  --dtb-btn-hover-color: var(--dtb-aux);
  --dtb-btn-active-bg: var(--dtb-secondary); 
  --dtb-btn-active-color: var(--dtb-aux);
  --dtb-btn-secondary: var(--dtb-accent);
  --dtb-btn-secondary-color: var(--dtb-aux);

  --dtb-input-border-focus: var(--dtb-primary);

  --bs-link-color: var(--dtb-secondary);
  --bs-link-hover-color: var(--dtb-primary);
}

/* Outline primary to match variables */
.btn-outline-primary {
  font-family: var(--dtb-font-primary) !important;
  text-transform: uppercase !important;
  font-weight: 900!important;
  border-color: var(--dtb-primary);
  color: var(--dtb-primary);
}

/* Nav tabs minimal style with clear focus */
#dtb-custom-nav-tabs li.nav-item a {
  color: var(--dtb-primary) !important;
  border-radius: 0.6rem !important;
  font-family: var(--dtb-font-primary);
  font-weight: 900 !important;
  background: var(--dtb-aux) !important;
  border: 1px solid var(--dtb-primary) !important;
}

#dtb-custom-nav-tabs li.nav-item a.active,
#dtb-custom-nav-tabs li.nav-item a:hover {
  color: var(--dtb-aux) !important;
  border-color: var(--dtb-primary) !important;
  background: var(--dtb-primary) !important;
}

#dtb-custom-nav-tabs li.nav-item a.active{
  background: var(--dtb-secondary) !important;
  border-color: var(--dtb-secondary) !important;
}



/* Ensure custom cart and pay buttons look like primary */
#dtb-custom-cart-btn,
.dtb-pay-btn {
  font-family: var(--dtb-font-primary) !important;
  color: var(--dtb-btn-color) !important;
  background-color: var(--dtb-btn-bg) !important;
  border-color: var(--dtb-btn-bg) !important;
  border-radius: var(--dtb-btn-border-radius) !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

#dtb-custom-cart-btn:hover,
.dtb-pay-btn:hover {
  color: var(--dtb-btn-hover-color) !important;
  background-color: var(--dtb-hover) !important;
  border-color: var(--dtb-hover) !important;
}

#dtb-custom-cart-btn:active,
.dtb-pay-btn:active {
  color: var(--dtb-btn-active-color) !important;
  background-color: var(--dtb-btn-active-bg) !important;
  border-color: var(--dtb-btn-active-bg) !important;
}

/* Typography */
h1 {
  font-family: var(--dtb-font-primary) !important;
  color: var(--dtb-secondary) !important; /* highest contrast on white */
}

h2 {
  font-family: var(--dtb-font-primary) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--dtb-primary) !important;
}

.dtb-item-list h3{
  font-family: var(--dtb-font-primary);
}

h3,
.modal-title {
  font-family: var(--dtb-font-secondary);
  color: var(--dtb-secondary);
  font-weight: 700;
}

.item-variables,
.item-price,
h5{  
  font-family: var(--dtb-font-secondary);
}

/* Prices pop a bit using accent */
.item-price {
  color: var(--dtb-primary);
  font-family: var(--dtb-font-primary);
}