/* ============================================
 * DirectNine Application Styles
 * Generated by setup_brand.sh
 * ============================================ */

/* Custom Font Faces - Sharp Sans */
@font-face {
  font-family: 'Sharp Sans';
  src: url('/fonts/Sharp Sans.otf') format('opentype'),
       url("/fonts/sharp-sans.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sharp Sans';
  src: url('/fonts/Sharp Sans Medium.otf') format('opentype'),
       url("/fonts/sharp-sans-medium.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sharp Sans';
  src: url("/fonts/SharpSansSemibold.otf") format('opentype'),
       url("/fonts/sharp-sans-semibold.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sharp Sans';
  src: url("/fonts/SharpSansBold.otf") format('opentype'),
       url("/fonts/sharp-sans-bold.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
 * CSS Variables - Brand Colors
 * ============================================ */

:root {
  /* Primary Brand Color - Deep Blue */
  --color-brand: #0E3163;
  --color-brand-dark: #123E7D;
  --color-brand-light: #1A4A8A;
  
  /* Legacy aliases (used by engine CSS) */
  --color-nava: #0E3163;
  --color-nava-dark: #7DA4DB;  /* Secondary color for hover states */
  --color-nava-light: #1A4A8A;
  --color-nava-pressed: #7DA4DB;  /* Secondary color for pressed states */
  --color-nava-active: #5B8AC7;  /* Slightly darker secondary for active */
  
  /* Button aliases (engine components use these) */
  --brand: #0E3163;
  --brand-hover: #7DA4DB;  /* Secondary color for hover */
  --brand-light: #1A4A8A;
  
  /* Brand-specific aliases */
  --brand-primary: #0E3163;
  --brand-primary-light: #1A4A8A;
  --brand-primary-dark: #123E7D;
  
  /* Secondary Brand Color - Light Blue */
  --color-brand-secondary: #7DA4DB;
  --color-brand-secondary-light: #A5C4E8;
  --color-brand-secondary-dark: #0066CC;
  --brand-secondary: #7DA4DB;
  --brand-secondary-light: #A5C4E8;
  
  /* Neutral Colors */
  --brand-white: #FFFFFF;
  --brand-light-gray: #F5F5F5;
  --brand-gray: #666666;
  --brand-dark-gray: #333333;
  --brand-black: #000000;
  
  /* Typography */
  --font-primary: 'Sharp Sans', sans-serif;
  --font-display: 'Sharp Sans', sans-serif;
  --font-body: 'Sharp Sans', sans-serif;
}

/* ============================================
 * Brand-Specific Overrides
 * ============================================ */

/* Logo styling */
.directnine-logo {
  max-height: 40px;
  width: auto;
}

/* Ensure buttons use brand colors */
.btn-primary,
.button-primary,
[data-action="add-to-cart"] {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: white !important;
}

.btn-primary:hover,
.button-primary:hover,
[data-action="add-to-cart"]:hover {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

/* Links */
a {
  color: var(--color-brand);
}

a:hover {
  color: var(--color-brand-secondary);
}

/* ============================================
 * DirectNine Brand: Secondary Color for Hover States
 * Engine uses --color-nava-dark for hover, we override to secondary
 * ============================================ */

/* Add to Cart button hover - use secondary color */
.product-detail__add-to-cart:hover {
  background-color: var(--color-brand-secondary) !important;
  border-color: var(--color-brand-secondary) !important;
}

/* Sticky Add to Cart button hover */
.sticky-add-to-cart__button:hover {
  background-color: var(--color-brand-secondary) !important;
  border-color: var(--color-brand-secondary) !important;
}

/* Modal submit buttons hover */
.notify-me-modal__submit:hover {
  background-color: var(--color-brand-secondary) !important;
}

/* ============================================
 * Cart Page Button Fixes
 * Engine has hardcoded NavaFresh colors (#4a6d14)
 * ============================================ */

/* Checkout button - default should be primary blue */
.cart-page__checkout-btn {
  background-color: var(--color-brand) !important;  /* Primary: #0E3163 */
  border-color: var(--color-brand) !important;
}

/* Checkout button hover - secondary light blue */
.cart-page__checkout-btn:hover {
  background-color: var(--color-brand-secondary) !important;  /* Secondary: #7DA4DB */
  border-color: var(--color-brand-secondary) !important;
}

/* Cart page buttons (Continue Shopping, etc.) */
.cart-page__button {
  background-color: var(--color-brand) !important;
}

.cart-page__button:hover {
  background-color: var(--color-brand-secondary) !important;
}

/* Out of stock modal remove button */
.out-of-stock-modal__remove-btn {
  background-color: var(--color-brand) !important;
}

.out-of-stock-modal__remove-btn:hover {
  background-color: var(--color-brand-secondary) !important;
}

/* ============================================
 * Cart Page Price Colors - Use Primary Blue
 * ============================================ */

/* Cart item current price */
.cart-item__current-price {
  color: var(--color-brand) !important;  /* Primary: #0E3163 */
}

/* Sticky cart price */
.sticky-add-to-cart__price {
  color: var(--color-brand) !important;
}

/* Product detail price */
.product-detail__price {
  color: var(--color-brand) !important;
}

/* Order summary savings text */
.cart-page__summary-savings {
  color: var(--color-brand) !important;
}