/**
 * Peace of Sleep Brand Theme
 *
 * Overrides default CMB tokens with POS brand colors.
 * Applied via .pos-theme wrapper class.
 *
 * Brand Colors:
 * - Linen: #EAE7E1 (warm backgrounds)
 * - Gold: #BD982F (primary accent)
 * - Gold Hover: #A8872A
 * - Black: #000000 (text, headers)
 * - Grey: #C1BFBD (secondary)
 */

/* ===========================================
   POS TOKEN OVERRIDES
   =========================================== */

.pos-theme {
  /* Brand colors - override violet with gold */
  --color-brand-primary: #BD982F;
  --color-brand-primary-dark: #A8872A;
  --color-brand-primary-light: #d4af37;

  /* Alpha variants for focus states, backgrounds */
  --color-brand-primary-alpha-5: rgba(189, 152, 47, 0.05);
  --color-brand-primary-alpha-8: rgba(189, 152, 47, 0.08);
  --color-brand-primary-alpha-10: rgba(189, 152, 47, 0.1);
  --color-brand-primary-alpha-15: rgba(189, 152, 47, 0.15);
  --color-brand-primary-alpha-20: rgba(189, 152, 47, 0.2);
  --color-brand-primary-alpha-35: rgba(189, 152, 47, 0.35);

  /* Surfaces - warm linen tones */
  --surface-1: #EAE7E1;
  --surface-2: #E5E2DC;

  /* Text brand color */
  --text-brand: #BD982F;

  /* Legacy aliases */
  --color-primary: #BD982F;
  --color-primary-dark: #A8872A;
  --color-primary-light: #d4af37;
}

/* ===========================================
   POS NAVIGATION OVERRIDES
   =========================================== */

.pos-theme .site-nav {
  background: #000000;
}

.pos-theme .site-nav.scrolled {
  background: #000000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pos-theme .nav-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.pos-theme .site-nav .nav-cta.btn {
  background: #BD982F !important;
  color: #000000 !important;
  border-color: #BD982F !important;
}

.pos-theme .site-nav .nav-cta.btn:hover {
  background: #A8872A !important;
  color: #000000 !important;
  border-color: #A8872A !important;
}

/* Mobile nav toggle lines - white on gold */
.pos-theme .nav-mobile-toggle span {
  background: #ffffff;
}

/* ===========================================
   POS FOOTER OVERRIDES
   =========================================== */

.pos-theme .site-footer {
  background-color: #000000;
}

.pos-theme .footer-logo {
  color: #BD982F;
}

.pos-theme .footer-heading {
  color: #BD982F;
}

.pos-theme .footer-social a:hover {
  color: #BD982F;
}

/* ===========================================
   POS BUTTON OVERRIDES
   =========================================== */

.pos-theme .btn-primary {
  background: #BD982F;
  color: #000000;
  border-color: #BD982F;
}

.pos-theme .btn-primary:hover {
  background: #A8872A;
  border-color: #A8872A;
}

.pos-theme .btn-secondary {
  background: transparent;
  color: #000000;
  border-color: #BD982F;
}

.pos-theme .btn-secondary:hover {
  background: rgba(189, 152, 47, 0.1);
}

/* On dark backgrounds */
.pos-theme .hero--brand .btn-primary {
  background: #000000;
  color: #BD982F;
  border-color: #000000;
}

.pos-theme .hero--brand .btn-primary:hover {
  background: #1a1a1a;
  color: #d4af37;
}

/* ===========================================
   POS HERO OVERRIDES
   =========================================== */

/* Standard hero - gold gradient background */
.pos-theme .hero {
  background: linear-gradient(135deg, #BD982F 0%, #A8872A 100%);
}

.pos-theme .hero h1 {
  color: #ffffff;
}

.pos-theme .hero .hero-text {
  color: rgba(255, 255, 255, 0.95);
}

/* Hero CTA button - black on gold */
.pos-theme .hero .btn-primary {
  background: #000000;
  color: #BD982F;
  border-color: #000000;
}

.pos-theme .hero .btn-primary:hover {
  background: #1a1a1a;
  color: #d4af37;
}

/* Hero variant class (if used) */
.pos-theme .hero--brand {
  background: linear-gradient(135deg, #BD982F 0%, #A8872A 100%);
}

/* ===========================================
   POS CARD ACCENTS
   =========================================== */

.pos-theme .card:hover {
  border-color: var(--color-brand-primary-alpha-35);
}

/* ===========================================
   POS POWERED BY ATTRIBUTION
   =========================================== */

.pos-powered-by {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.pos-powered-by a {
  color: #BD982F;
  text-decoration: none;
}

.pos-powered-by a:hover {
  text-decoration: underline;
}