@import url('/themes/lsg-life-style/assets/css/theme.css');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  --brand-background: #050a17;
  --brand-panel: #0c1428;
  --brand-purple: #35155d;
  --brand-violet: #6d32a8;
  --brand-gold: #d7a94b;
  --brand-gold-light: #f1d08a;
  --brand-text: #f5efe0;
  --brand-muted: #a89eb6;
  --brand-white: #f5efe0;

  --lsg-color-primary: var(--brand-gold);
  --lsg-color-primary-strong: var(--brand-violet);
  --lsg-color-background: var(--brand-background);
  --lsg-color-surface: var(--brand-panel);
  --lsg-color-text: var(--brand-text);
  --lsg-color-muted: var(--brand-muted);
  --lsg-color-highlight: var(--brand-gold-light);
  --lsg-font-heading: "Cinzel", "Times New Roman", serif;
  --lsg-font-body: "Source Sans 3", Inter, "Segoe UI", Arial, sans-serif;
  --lsg-font-display: var(--lsg-font-heading);
  --lsg-font-code: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

:root.is-mobile :is(.lsg-home,.lsg-footer),
.page-index #wrapper,
.page-category #wrapper,
.page-product #content-wrapper,
.page-cart .page-content,
.page-order-confirmation #wrapper,
.page-customer #wrapper,
.page-cms #wrapper {
  font-family: var(--lsg-font-body);
}

.lsg-home :is(h1,h2,.lsg-section-title,.lsg-editorial h2,.lsg-newsletter h2),
.lsg-collection-card > span {
  font-family: var(--lsg-font-display);
}

.page-index .lsg-home,
.page-category .lsg-category-listing,
.page-product #content-wrapper,
.page-cart .page-content,
.page-order .page-content,
.page-order-confirmation #wrapper {
  background: linear-gradient(180deg, var(--lsg-color-background) 0 72%, var(--lsg-color-surface) 72% 100%);
}

.lsg-main-nav {
  background: var(--lsg-color-background);
}