/* ToysCentral Application Styles
 * Brand-specific overrides and additions
 * 
 * Note: All component CSS files are loaded individually via stylesheet_link_tag 
 * in application.html.erb to ensure proper digest hash handling by Propshaft.
 * Do NOT use @import statements here as they cause 404 errors.
 */

/* ==========================================================================
   FONT DECLARATIONS
   ========================================================================== */

@font-face {
  font-family: 'Galano Grotesque';
  src: url("/fonts/GalanoGrotesqueRegular.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Galano Grotesque';
  src: url("/fonts/GalanoGrotesqueMedium.otf") format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Galano Grotesque';
  src: url("/fonts/GalanoGrotesqueSemiBold.otf") format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Galano Grotesque';
  src: url("/fonts/GalanoGrotesqueBold.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Brand Variables)
   ========================================================================== */

:root {
  /* ToysCentral brand colors - Orange & Dark Charcoal */
  --brand-primary: #FF6600;
  --brand-primary-dark: #E65C00;
  --brand-primary-light: #FF8533;
  
  --brand-secondary: #332E2E;
  --brand-secondary-light: #4A4545;
  --brand-secondary-dark: #1A1717;
  
  /* Accent color (Yellow - for highlights) */
  --brand-accent: #F1C40F;
  --brand-accent-light: #F4D03F;
  --brand-accent-dark: #D4AC0D;
  
  /* Typography */
  --font-primary: 'Galano Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Galano Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Override h9commerce gem color variables (used by components) */
  --color-nava: #FF6600;
  --color-nava-dark: #E65C00;
  --color-nava-pressed: #CC5200;
  --color-nava-light: #FF8533;
  --color-nava-active: #CC5200;
  
  /* Brand variables used by product cards */
  --brand: #FF6600;
  --brand-hover: #E65C00;
  
  /* Override h9commerce defaults to use brand colors */
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-primary-dark);
  --color-primary-light: var(--brand-primary-light);
  --color-secondary: var(--brand-secondary);
  
  /* Text colors */
  --color-text-primary: var(--brand-secondary);
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  
  /* Button colors */
  --btn-primary-bg: var(--brand-primary);
  --btn-primary-hover: var(--brand-primary-dark);
  --btn-primary-text: #FFFFFF;
}

/* ==========================================================================
   GLOBAL OVERRIDES
   ========================================================================== */

body {
  font-family: var(--font-primary);
  color: var(--brand-secondary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Primary buttons */
.btn-primary,
.bg-primary,
[class*="bg-brand"] {
  background-color: var(--brand-primary) !important;
}

.btn-primary:hover {
  background-color: var(--brand-primary-dark) !important;
}

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

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

/* ==========================================================================
   TOYSCENTRAL-SPECIFIC STYLES
   ========================================================================== */

.toyscentral-logo {
  /* Custom logo styles */
}

.toyscentral-banner {
  /* Custom banner styles */
}

/* Sale/Special offer badges - use accent color */
.badge-sale,
.badge-special {
  background-color: var(--brand-accent);
  color: var(--brand-secondary);
}

/* ==========================================================================
   CART PAGE - Override engine hardcoded colors
   ========================================================================== */

/* Checkout button - default uses brand primary */
.cart-page__checkout-btn {
  background-color: var(--brand-primary) !important;  /* #FF6600 */
  border-color: var(--brand-primary) !important;
}

/* Checkout button hover - use secondary for hover */
.cart-page__checkout-btn:hover {
  background-color: var(--brand-secondary) !important;  /* #332E2E */
  border-color: var(--brand-secondary) !important;
}

/* Cart page item prices */
.cart-item__current-price {
  color: var(--brand-primary) !important;
}

/* ==========================================================================
   PRODUCT DETAIL PAGE - Button hover states
   ========================================================================== */

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

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

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

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

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

/* ==========================================================================
   BULK ORDER PAGE - Override inline styles
   ========================================================================== */

/* Submit enquiry button - override hardcoded NavaFresh green */
.bulk-order-page input[type="submit"] {
  background: var(--brand-primary) !important;  /* #FF6600 */
}

.bulk-order-page input[type="submit"]:hover {
  background: var(--brand-secondary) !important;  /* #332E2E */
}

/* ==========================================================================
   PRODUCT DETAIL - Trust Markers / Feature Icons
   ========================================================================== */

/* Override feature icon colors - they use var(--color-nava) which we've set */
.product-detail__feature-icon {
  color: var(--brand-primary) !important;
}

.product-detail__feature-icon svg,
.product-detail__feature-icon path,
.product-detail__feature-icon rect,
.product-detail__feature-icon circle {
  stroke: var(--brand-primary) !important;
}

/* Specific override for the secure payments icon (inline SVG with hardcoded #7D9A4C) */
.product-detail__feature--secure .product-detail__feature-icon path,
.product-detail__feature--secure .product-detail__feature-icon rect {
  stroke: var(--brand-primary) !important;
}

.product-detail__feature--secure .product-detail__feature-icon circle {
  fill: var(--brand-primary) !important;
}

/* ==========================================================================
   CART PAGE - Additional color overrides
   ========================================================================== */

/* Cart item name hover link */
.cart-item__name a:hover {
  color: var(--brand-primary) !important;
}

/* Savings text */
.cart-page__summary-savings,
.cart-page__savings-text {
  color: var(--brand-primary) !important;
}

/* Price colors */
.cart-item__original-price {
  color: var(--brand-secondary) !important;
}

/* Continue shopping link */
.cart-page__continue-link,
.cart-page__continue-link:hover {
  color: var(--brand-primary) !important;
}