/* NinthAvenue 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.
 */

/* ==========================================
 * NinthAvenue Font Definitions
 * ========================================== */

/* Kiona - Display/Headings Font */
@font-face {
  font-family: 'Kiona';
  src: url("/fonts/Kiona-Regular.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Montserrat - Body Font */
@font-face {
  font-family: 'Montserrat';
  src: url("/fonts/Montserrat-Regular.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url("/fonts/Montserrat-Medium.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url("/fonts/Montserrat-SemiBold.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url("/fonts/Montserrat-Bold.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================
 * NinthAvenue Brand Variables
 * ========================================== */

:root {
  /* ==========================================================================
   * NinthAvenue Brand Colors - Overrides engine defaults
   * Updated Dec 2024 - Earthy olive/sage palette
   * ========================================================================== */
  
  /* Primary brand color - Olive/Sage Green */
  --color-brand: #8E9279;
  --color-brand-dark: #767A5F;
  --color-brand-light: #A3A78D;
  
  /* Short aliases - CRITICAL for component CSS (buttons, cards, etc.) */
  --brand: #8E9279;
  --brand-hover: #767A5F;
  --brand-light: #A3A78D;
  
  /* Legacy aliases (used by engine CSS) */
  --color-nava: #8E9279;
  --color-nava-dark: #767A5F;
  --color-nava-light: #A3A78D;
  --color-nava-pressed: #767A5F;
  --color-nava-active: #5E614D;
  
  /* Secondary brand color - Warm Brown/Cream */
  --color-brand-secondary: #68604D;
  --color-brand-secondary-light: #E3D3BC;
  --color-brand-secondary-dark: #4A4437;
  
  /* Brand-specific aliases for component overrides */
  --brand-primary: #8E9279;
  --brand-primary-light: #A3A78D;
  --brand-primary-dark: #767A5F;
  --brand-secondary: #68604D;
  --brand-secondary-light: #E3D3BC;
  
  /* Neutrals */
  --brand-white: #FFFFFF;
  --brand-light-gray: #F1F1F1;
  --brand-gray: #898984;
  --brand-black: #000000;
  
  /* Typography - NinthAvenue uses Montserrat (body) and Kiona (headings) */
  --font-primary: 'Montserrat', sans-serif;
  --font-bold: 'Montserrat', sans-serif;
  --font-semibold: 'Montserrat', sans-serif;
  --font-display: 'Kiona', sans-serif;
}

/* ==========================================
 * NinthAvenue Typography Overrides
 * ========================================== */

/* Use Kiona for main headings */
h1, h2, .hero-title, .section-title {
  font-family: var(--font-display);
}

/* Use Montserrat for body text */
body {
  font-family: var(--font-primary);
}

/* Product Detail - Use Kiona for product titles and section headings */
.product-detail__title,
.product-detail__section-title,
.notify-me-modal__title {
  font-family: var(--font-display);
}

/* Footer section headings */
.site-footer__heading {
  font-family: var(--font-display);
}

/* Home page headings */
.hero__title,
.collection-section__title,
.category-card__title {
  font-family: var(--font-display);
}

/* ==========================================
 * NinthAvenue Component Overrides
 * ========================================== */

/* Override primary button colors */
.btn-primary,
.product-detail__add-to-cart,
.shipping-navigation__pay {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.product-detail__add-to-cart:hover,
.shipping-navigation__pay:hover {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

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

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

/* Custom logo styles */
.ninthavenue-logo {
  max-height: 46px;
}

/* Custom banner styles */
.ninthavenue-banner {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
}

/* ==========================================
 * NinthAvenue - Best Sellers Overrides
 * ========================================== */

.best-sellers__title {
  font-family: var(--font-display);
}

.best-sellers__view-all {
  color: var(--brand-primary);
  font-weight: 600;
}

.best-sellers__view-all:hover {
  color: var(--brand-primary-dark);
}

/* ==========================================
 * NinthAvenue - Category Cards Overrides
 * ========================================== */

.categories__title {
  font-family: var(--font-display);
}