/**
 * Athletic Gear Theme CSS
 * Bold sporting-goods design — dark ink, teal accent, sharp corners, angled details.
 *
 * All colors are driven by API theme colors (primary, secondary, neutral scales).
 * ColorManagerService injects --primary-50..900, --secondary-50..900, --neutral-50..900 on :root.
 * This file defines semantic tokens and utility classes that use those variables.
 */

:root {
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Archivo Black', system-ui, sans-serif;
  --primary-main: var(--primary-600);
  --primary-hover: var(--primary-700);
  --primary-light: var(--primary-300);
  --primary-dark: var(--primary-800);

  --hero-gradient: linear-gradient(135deg, var(--secondary-900) 0%, var(--secondary-800) 100%);
  --hero-accent: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-300) 100%);

  --secondary-main: var(--secondary-900);
  --secondary-hover: var(--secondary-800);

  --background-primary: #FFFFFF;
  --background-secondary: var(--neutral-100);
  --background-card: #FFFFFF;
  --background-dark: var(--secondary-900);
  --background-overlay: rgba(20, 24, 26, 0.65);

  --text-primary: var(--secondary-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-400);
  --text-inverse: #FFFFFF;
  --text-link: var(--primary-600);
  --text-link-hover: var(--primary-700);

  --border-light: var(--neutral-200);
  --border-medium: var(--neutral-300);
  --border-dark: var(--secondary-900);
  --border-focus: var(--primary-600);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 24px -6px rgba(0, 0, 0, 0.14);
  --shadow-xl: 0 20px 34px -8px rgba(0, 0, 0, 0.16);

  --button-primary-background: var(--secondary-900);
  --button-primary-background-hover: var(--primary-600);
  --button-primary-text: #FFFFFF;
  --button-primary-border: var(--secondary-900);

  --button-secondary-background: var(--primary-600);
  --button-secondary-background-hover: var(--secondary-900);
  --button-secondary-text: #FFFFFF;
  --button-secondary-border: var(--primary-600);

  --button-outline-background: transparent;
  --button-outline-background-hover: var(--secondary-900);
  --button-outline-text: var(--secondary-900);
  --button-outline-text-hover: #FFFFFF;
  --button-outline-border: var(--secondary-900);

  --button-ghost-background: transparent;
  --button-ghost-background-hover: var(--neutral-100);
  --button-ghost-text: var(--neutral-700);
  --button-ghost-text-hover: var(--secondary-900);
  --button-ghost-border: transparent;

  --badge-primary-bg: var(--primary-600);
  --badge-primary-text: #FFFFFF;
  --badge-primary-border: var(--primary-600);

  --form-input-background: #FFFFFF;
  --form-input-background-focus: #FFFFFF;
  --form-input-text: var(--secondary-900);
  --form-input-placeholder: var(--neutral-400);
  --form-input-border: var(--neutral-300);
  --form-input-border-focus: var(--primary-600);
  --form-label-text: var(--neutral-700);

  --card-background: #FFFFFF;
  --card-border: var(--neutral-200);
  --card-shadow: none;
  --card-shadow-hover: var(--shadow-md);

  --navigation-background: var(--secondary-900);
  --navigation-text: #cfd6d4;
  --navigation-text-hover: #FFFFFF;
  --navigation-border: var(--secondary-800);
  --navigation-active: var(--primary-400);

  --footer-background: #0d1011;
  --footer-text: #FFFFFF;
  --footer-text-secondary: #9aa3a0;
  --footer-border: #1c2123;

  --newsletter-gradient: var(--secondary-900);
  --newsletter-text: #FFFFFF;
  --newsletter-input-border: var(--secondary-700);
  --newsletter-cta-bg: var(--primary-600);
  --newsletter-cta-text: #FFFFFF;

  --product-price-regular: var(--secondary-900);
  --product-badge-new: var(--primary-600);
  --product-badge-sale: #d94f4f;
  --product-badge-out-of-stock: var(--neutral-500);

  --loading-spinner: var(--primary-600);
  --loading-overlay: rgba(255, 255, 255, 0.9);

  --error-main: #d94f4f;
  --error-foreground: #FFFFFF;
  --warning-main: #F59E0B;
  --warning-foreground: var(--secondary-900);
  --success-main: var(--primary-600);
  --success-foreground: #FFFFFF;
  --info-main: var(--primary-600);
  --info-foreground: #FFFFFF;

  /* Legacy aliases */
  --primary-color: var(--primary-main);
  --secondary-color: var(--secondary-main);
  --background-color: var(--background-primary);
  --text-linkHover: var(--text-link-hover);
  --form-input-borderError: var(--error-main);
  --form-input-borderFocus: var(--form-input-border-focus);
  --button-primary-backgroundHover: var(--button-primary-background-hover);
  --button-secondary-backgroundHover: var(--button-secondary-background-hover);
  --button-outline-textHover: var(--button-outline-text-hover);
  --navigation-textHover: var(--navigation-text-hover);
  --card-shadowHover: var(--card-shadow-hover);
}

/* Typography — driven by font-manager (--font-heading / --font-body) */
.athletic-gear-theme,
.theme-athletic-gear {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  max-width: 100%;
}
.theme-athletic-gear h1,
.theme-athletic-gear h2,
.theme-athletic-gear h3,
.theme-athletic-gear h4,
.theme-athletic-gear h5,
.theme-athletic-gear h6 {
  font-family: var(--font-heading, 'Archivo Black', system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ========== Theme utility classes ========== */

.theme-bg-page { background-color: var(--background-primary); }
.theme-hover-bg-subtle:hover { background-color: var(--neutral-100); }
.theme-bg-card { background-color: var(--card-background); border: 1px solid var(--card-border); }
.theme-bg-hero { background: var(--hero-gradient); color: var(--text-inverse); }
.theme-bg-section-alt { background-color: var(--background-secondary); }
.theme-bg-footer { background-color: var(--footer-background); color: var(--footer-text); }
.theme-bg-newsletter { background: var(--newsletter-gradient); color: var(--newsletter-text); }
.theme-bg-dark { background-color: var(--background-dark); color: var(--text-inverse); }

.theme-nav { background-color: var(--navigation-background); border-bottom: 1px solid var(--navigation-border); }
.theme-nav-link { color: var(--navigation-text); }
.theme-nav-link:hover { color: var(--navigation-text-hover); }
.theme-nav-link.router-link-active { color: var(--navigation-active); border-bottom: 2px solid var(--navigation-active); }
.theme-nav-cart-badge { background-color: var(--primary-600); color: #FFFFFF; }

.theme-text-heading { color: var(--text-primary); }
.theme-text-body { color: var(--text-secondary); }
.theme-text-muted { color: var(--text-muted); }
.theme-link { color: var(--text-link); }
.theme-link:hover { color: var(--text-link-hover); }

.theme-border { border-color: var(--border-light); }
.theme-border-t { border-top: 1px solid var(--border-light); }
.theme-border-b { border-bottom: 1px solid var(--border-light); }

/* Buttons — square corners, uppercase, no radius (sport/utility aesthetic) */
.theme-btn-primary {
  background-color: var(--button-primary-background);
  color: var(--button-primary-text);
  border: 1px solid var(--button-primary-border);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.theme-btn-primary:hover:not(:disabled) {
  background-color: var(--button-primary-background-hover);
  border-color: var(--button-primary-background-hover);
}

.theme-btn-secondary {
  background-color: var(--button-secondary-background);
  color: var(--button-secondary-text);
  border: 1px solid var(--button-secondary-border);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.theme-btn-secondary:hover:not(:disabled) {
  background-color: var(--button-secondary-background-hover);
  border-color: var(--button-secondary-background-hover);
}

.theme-btn-outline {
  background-color: var(--button-outline-background);
  color: var(--button-outline-text);
  border: 1px solid var(--button-outline-border);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.theme-btn-outline:hover:not(:disabled) {
  background-color: var(--button-outline-background-hover);
  color: var(--button-outline-text-hover);
  border-color: var(--button-outline-background-hover);
}

.theme-btn-ghost {
  background-color: var(--button-ghost-background);
  color: var(--button-ghost-text);
  border: 1px solid var(--button-ghost-border);
}
.theme-btn-ghost:hover:not(:disabled) {
  background-color: var(--button-ghost-background-hover);
  color: var(--button-ghost-text-hover);
}

.theme-btn-hero-outline {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.theme-btn-hero-outline:hover {
  background: #FFFFFF;
  color: var(--secondary-900);
  border-color: #FFFFFF;
}

.theme-badge { background-color: var(--badge-primary-bg); color: var(--badge-primary-text); border: 1px solid var(--badge-primary-border); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; }

.theme-product-card {
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: 0;
  box-shadow: var(--card-shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
.theme-product-card:hover {
  border-color: var(--primary-400);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}
.theme-product-price { color: var(--product-price-regular); font-weight: 800; }
.theme-add-to-cart {
  background-color: var(--button-primary-background);
  color: var(--button-primary-text);
  border: 1px solid var(--button-primary-border);
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.theme-add-to-cart:hover:not(:disabled) {
  background-color: var(--button-primary-background-hover);
  border-color: var(--button-primary-background-hover);
}
.theme-add-to-cart:disabled {
  background-color: var(--neutral-200);
  color: var(--neutral-500);
  border-color: var(--neutral-200);
  cursor: not-allowed;
}

.theme-input {
  background-color: var(--form-input-background);
  color: var(--form-input-text);
  border: 1px solid var(--form-input-border);
  border-radius: 0;
}
.theme-input:focus {
  outline: none;
  border-color: var(--form-input-border-focus);
  box-shadow: 0 0 0 3px rgba(15, 110, 99, 0.12);
}
.theme-input::placeholder { color: var(--form-input-placeholder); }

.theme-footer-link { color: var(--footer-text-secondary); }
.theme-footer-link:hover { color: var(--footer-text); }
.theme-footer-social-border { border: 1px solid var(--footer-border); border-radius: 50%; }
.theme-footer-social-border:hover {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: #FFFFFF;
}

.theme-title-underline {
  background: var(--primary-600);
  height: 3px;
}

.theme-newsletter-cta {
  background-color: var(--newsletter-cta-bg);
  color: var(--newsletter-cta-text);
  border: 1px solid var(--newsletter-cta-bg);
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.theme-newsletter-cta:hover {
  background-color: #FFFFFF;
  color: var(--secondary-900);
  border-color: #FFFFFF;
}
.theme-newsletter-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--newsletter-input-border);
  color: var(--newsletter-text);
  border-radius: 0;
}
.theme-newsletter-input::placeholder { color: #9aa3a0; }
.theme-newsletter-input:focus {
  border-color: var(--primary-400);
  background: rgba(255, 255, 255, 0.14);
}

.theme-hero-accent {
  background: var(--hero-accent);
  height: 3px;
}

.theme-section-divider {
  height: 1px;
  background: var(--border-light);
}

.theme-spec-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  font-size: 0.75rem;
  color: var(--neutral-600);
}
.theme-spec-badge-icon { width: 12px; height: 12px; opacity: 0.7; }