/* NineTribe Application Styles
 * Brand-specific overrides and additions
 * Generated by h9 brand launcher
 * 
 * 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 Definitions
 * ========================================================= */

/* Brand font is Roboto (per manifest). The launcher emitted "No fonts configured"
   so Roboto was never registered and rendered only for visitors who happened to
   have it installed locally. Register the faces shipped in public/fonts. */
@font-face {
  font-family: 'Roboto';
  src: url("/fonts/Roboto-Light.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url("/fonts/Roboto-Regular.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url("/fonts/Roboto-Medium.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url("/fonts/Roboto-Bold.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
 * Brand Color Variables
 * ========================================================= */

:root {
  /* Primary Colors */
  --color-brand: #000000;
  --color-brand-dark: #000000;
  --color-brand-light: #262626;
  --color-brand-rgb: 0, 0, 0;
  --color-brand-dark-rgb: 0, 0, 0;
  --color-brand-light-rgb: 38, 38, 38;
  --color-brand-accent: #F1F1F1;
  --color-brand-accent-rgb: 241, 241, 241;
  --about-questions-background: var(--color-brand);
  --about-questions-overlay-rgb: var(--color-brand-rgb);
  --about-questions-overlay-opacity: 1;
  
  /* Legacy variable names (for engine compatibility) */
  --color-nava: #000000;
  --color-nava-dark: #000000;
  --color-nava-light: #262626;
  --color-nava-pressed: #000000;
  --color-nava-active: #000000;
  
  /* Button aliases (engine CSS uses these) */
  --brand: #000000;
  --brand-hover: #000000;
  --brand-light: #262626;
  
  /* Secondary Colors */
  --color-brand-secondary: #FC6F59;
  --color-brand-secondary-dark: #d54832;
  --color-brand-secondary-light: #ff957f;
  --color-brand-secondary-rgb: 252, 111, 89;
  --color-brand-secondary-dark-rgb: 213, 72, 50;
  --color-brand-secondary-light-rgb: 255, 149, 127;
  
  /* Neutrals */
  --brand-white: #FFFFFF;
  --brand-light-gray: #F5F5F5;
  --brand-gray: #666666;
  --brand-dark-gray: #333333;
  --brand-black: #000000;
  
  /* Typography */
  --font-primary: 'Roboto', sans-serif;
  --font-display: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;

  /* Cart semantics */
  --color-cart-item-brand: #000000;
}

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

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

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

/* Primary buttons use brand color */
.btn-primary,
button[type="submit"]:not(.btn-secondary):not(.cart-item__remove),
.add-to-cart-btn {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

.btn-primary:hover,
button[type="submit"]:not(.btn-secondary):not(.cart-item__remove):hover,
.add-to-cart-btn:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

/* Links use brand color */
/* Use :where() so this stays low-specificity and doesn't override component CTAs/pills. */
a:where(:not(.btn)) {
  color: var(--color-brand);
}

a:where(:not(.btn)):hover {
  color: var(--color-brand-dark);
}

/* Keep cart remove icon neutral (not highlighted) */
.cart-item__remove {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Force secure payments icon to brand color (overrides inline SVG) */
.product-detail__feature--secure .product-detail__feature-icon {
  color: var(--color-nava);
}

.product-detail__feature--secure .product-detail__feature-icon path,
.product-detail__feature--secure .product-detail__feature-icon rect,
.product-detail__feature--secure .product-detail__feature-icon line,
.product-detail__feature--secure .product-detail__feature-icon polyline,
.product-detail__feature--secure .product-detail__feature-icon polygon,
.product-detail__feature--secure .product-detail__feature-icon circle {
  stroke: var(--color-nava) !important;
}

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

/* Bulk order CTA button uses brand colors (overrides inline styles) */
.bulk-order-page input[type="submit"],
.bulk-order-page button[type="submit"] {
  background: var(--color-nava) !important;
  background-color: var(--color-nava) !important;
  border-color: var(--color-nava) !important;
}

.bulk-order-page input[type="submit"]:hover,
.bulk-order-page button[type="submit"]:hover,
.bulk-order-page input[type="submit"]:focus,
.bulk-order-page button[type="submit"]:focus {
  background: var(--color-nava-dark) !important;
  background-color: var(--color-nava-dark) !important;
  border-color: var(--color-nava-dark) !important;
}