/*
 * Dante storefront color direction — Salla / Twilight
 * Apply after taking a theme backup or duplicate.
 * The CSS variables below are the stable, preferred integration layer.
 */

:root {
  --font-main: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --color-primary: #cf9f3d;
  --color-primary-dark: #a87617;
  --color-primary-light: #e9c877;
  --color-primary-reverse: #16120e;

  --dante-ink: #16120e;
  --dante-gold: #cf9f3d;
  --dante-gold-dark: #a87617;
  --dante-ivory: #f8f5ee;
  --dante-surface: #fffdf9;
  --dante-cream: #f1eade;
  --dante-muted: #6f655b;
  --dante-border: #e4d9c6;
  --dante-success: #365d4d;
  --dante-sale: #97302b;
}

body {
  background: var(--dante-ivory);
  color: var(--dante-ink);
  font-family: var(--font-main);
}

h1,
h2,
h3,
h4,
.section-title {
  color: var(--dante-ink);
  font-family: var(--font-main);
  letter-spacing: 0;
}

/* Gold is an accent, not a body-text color. */
a:not(.s-button-element):not([class*="button"]) {
  color: var(--dante-gold-dark);
}

/* Common Twilight/theme button hooks. CSS variables remain the primary control. */
.s-button-primary,
.btn--primary,
.button-primary,
salla-button[fill="solid"] {
  --color-primary: var(--dante-gold);
  --color-primary-dark: var(--dante-gold-dark);
  --color-primary-reverse: var(--dante-ink);
  border-radius: 12px;
  font-weight: 700;
}

/* Apply when these common product-card classes exist in the installed theme. */
.product-entry,
.product-card,
.s-product-card-entry {
  overflow: hidden;
  border: 1px solid var(--dante-border);
  border-radius: 18px;
  background: var(--dante-surface);
  box-shadow: 0 10px 30px rgb(22 18 14 / 7%);
}

.product-entry .price,
.product-card .price,
.s-product-card-price {
  color: var(--dante-ink);
  font-weight: 800;
}

.product-entry .sale-price,
.product-card .sale-price,
.s-product-card-sale-price {
  color: var(--dante-sale);
}

/* Keep homepage sections calm and visually connected. */
.home-section,
.section-padding {
  padding-block: clamp(42px, 6vw, 84px);
}

@media (max-width: 767px) {
  .home-section,
  .section-padding {
    padding-block: 34px;
  }

  .product-entry,
  .product-card,
  .s-product-card-entry {
    border-radius: 14px;
  }
}