/* ============================================
   HnK Party — Design Tokens, Gradients, Utility
   ============================================ */

/* ============================================
   HnK Party — Sydney
   Stylesheet
   Brand: Warm & elegant (cream / blush / terracotta)
   ============================================ */

/* ===== Tokens =====
   Brand palette: deep teal (#006f65) + warm tan (#c9af7f) on a cream base.
   Variable names (terracotta, blush, gold) are kept for code stability;
   the *values* are what define the look.
*/
:root {
  --cream: #faf6f0;
  --blush: #f0e6d2;          /* soft cream-tan (was pink blush) */
  --blush-deep: #e2d6b9;     /* deeper tan tint */
  --terracotta: #006f65;     /* PRIMARY ACCENT — deep teal */
  --terracotta-dark: #004d45;/* deeper teal for hover */
  --charcoal: #2b2520;
  --charcoal-soft: #4b3f34;
  --muted: #6b5e52;
  --soft-grey: #e8e0d0;      /* warmer grey */
  --gold: #c9af7f;           /* SECONDARY ACCENT — warm tan */
  --gold-deep: #b89868;
  --success: #6b9c6b;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(43, 37, 32, 0.05);
  --shadow-md: 0 8px 24px rgba(43, 37, 32, 0.08);
  --shadow-lg: 0 12px 40px rgba(43, 37, 32, 0.1);

  --container: 1200px;
}

/* ===== Gradient palette (placeholder visuals) ===== */
/* ===== Gradient palette for placeholder visuals =====
   Mixes brand teal (#006f65) and tan (#c9af7f) with cream tints
*/
.bg-g1 { background: linear-gradient(135deg, #f0e6d2, #ede4d0); color: #2b2520; }
.bg-g2 { background: linear-gradient(135deg, #e2d6b9, #d8c9a5); color: #2b2520; }
.bg-g3 { background: linear-gradient(135deg, #f3ead7, #e8d8b8); color: #2b2520; }
.bg-g4 { background: linear-gradient(135deg, #c9af7f, #b89868); color: #faf6f0; }
.bg-g5 { background: linear-gradient(135deg, #d8e5e0, #b9d2c8); color: #2b2520; }
.bg-g6 { background: linear-gradient(135deg, #006f65, #00897c); color: #faf6f0; }
.bg-g7 { background: linear-gradient(135deg, #e2d6b9, #c4d8d0); color: #2b2520; }
.bg-g8 { background: linear-gradient(135deg, #c9af7f, #006f65); color: #faf6f0; }


/* ===== Utility ===== */
/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-3 { margin-bottom: 24px; }


/* ===== Bebas Neue (numeric site-wide) ===== */
/* ===== Bebas Neue for numeric content site-wide =====
   Applied to prices, stats, totals, step indicators, marquee numbers, etc.
   Uses !important to override per-page inline font-family rules. */
.price, .price-big, .product-meta .price-big,
.package-price, .package-body .package-price,
.cart-count, .cart-subtotal strong,
.tier-price, .grabgo-tier .tier-price, .tier-card .tier-price,
.qi-num, .pt-price, .sc-size,
.kit-from, .kit-card-foot .kit-from,
.pd-from .price, .variant-row .v-price,
.set-total .st-value, .set-total .st-value small,
.set-includes .item-price, .item-price,
.quote-total .t-value, .quote-row .q-value,
.how-step .num, .step .step-num, .step-num, .process-step .ps-num,
.calc-step .num,
.tier-essential strong,
.pricing-tier .pt-price, .pricing-tier .pt-sub {
  font-family: 'Bebas Neue', 'Playfair Display', sans-serif !important;
  letter-spacing: 1.5px !important;
  font-weight: 400 !important;
}
/* Inline price labels (small text next to big numbers) keep Inter */
.tier-price small, .pt-price small, .price small,
.price-big small, .package-price small, .set-total .st-value small,
.kit-from small, .pd-from small, .tier-price-suffix {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: normal !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--muted) !important;
  margin-left: 4px !important;
  text-transform: lowercase !important;
}
/* Step number circles: keep size sensible */
.step .step-num, .step-num {
  font-size: 28px !important;
  letter-spacing: normal !important;
}