/* ========================================
   KAWIN STUDS — Shared dark pitch atmosphere
   Used by storefront + admin
   ======================================== */

:root {
  --pitch-bg-0: #050b14;
  --pitch-bg-1: #0a1628;
  --pitch-bg-2: #12233c;
  --pitch-glow: rgba(212, 168, 75, 0.16);
  --pitch-glow-blue: rgba(40, 90, 150, 0.22);
  --pitch-line: rgba(255, 255, 255, 0.06);
  --surface-elevated: rgba(255, 255, 255, 0.96);
  --surface-glass: rgba(14, 28, 48, 0.72);
  --text-on-dark: #f3f6fa;
  --text-on-dark-muted: rgba(243, 246, 250, 0.72);
}

body {
  color: var(--text-on-dark);
  background-color: var(--pitch-bg-1);
  background-image:
    radial-gradient(ellipse 70% 45% at 100% -5%, var(--pitch-glow), transparent 58%),
    radial-gradient(ellipse 55% 40% at -8% 18%, var(--pitch-glow-blue), transparent 52%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(212, 168, 75, 0.08), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(165deg, var(--pitch-bg-0) 0%, var(--pitch-bg-1) 42%, var(--pitch-bg-2) 100%);
  background-size:
    auto,
    auto,
    auto,
    36px 36px,
    36px 36px,
    auto;
  background-attachment: fixed;
}

/* Shared elevated content surfaces on dark canvas */
.product-card,
.trust-card,
.feature-item,
.brand-chip,
.size-chip,
.catalog-state,
.cart-card,
.checkout-card,
.order-summary,
.summary-card,
.filter-panel,
.filters,
.products-toolbar,
.detail-panel,
.admin-panel,
.admin-stat-card,
.form-card,
.admin-form,
.table-wrap {
  background: var(--surface-elevated);
  color: #121a26;
}

.section-head h2,
.section-head .section-eyebrow + h2 {
  color: var(--text-on-dark);
}

.section-eyebrow {
  color: var(--accent-bright, #efc56a);
}

.section-head p {
  color: var(--text-on-dark-muted);
}

.site-header {
  background: rgba(5, 11, 20, 0.82);
  border-bottom: 1px solid rgba(212, 168, 75, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.brand-name {
  color: #fff;
}

.brand-tagline {
  color: rgba(239, 197, 106, 0.78);
}

.nav-list a {
  color: rgba(243, 246, 250, 0.86);
}

.nav-list a:hover,
.nav-list a:focus-visible,
.nav-list a[aria-current="page"] {
  color: var(--accent-bright, #efc56a);
}

.nav-toggle-bar {
  background: #fff;
}

.site-nav {
  background: rgba(5, 11, 20, 0.98);
  border-bottom: 1px solid rgba(212, 168, 75, 0.22);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.nav-list a {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.site-footer {
  background: #03070e;
  border-top: 1px solid rgba(212, 168, 75, 0.18);
}