/* =========================================================
   DARK HEART CITY — DESIGN SYSTEM v1
   Mobile-first. Every size, space and color comes from the
   tokens below. Rule: never type a raw px value or hex color
   in a page — use a token. That is what keeps it consistent.
   ========================================================= */

/* ---------- Fonts (hosted on your own site, in /assets/fonts/) ----------
   To change fonts later: swap these files and the two --font tokens below. */
@font-face { font-family: "DM Serif Display"; src: url("../fonts/dm-serif-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("../fonts/dm-serif-display-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-500.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  /* Color */
  --ink: #1f141d;          /* text, dark panels */
  --ink-soft: #3a2b36;
  --paper: #f6f2ec;        /* page background */
  --card: #fffdfa;         /* cards, sheets */
  --violet: #b99bd6;       /* brand accent */
  --violet-deep: #6b3a91;  /* links, focus, active states */
  --violet-wash: #efe6f6;  /* tinted backgrounds */
  --line: #e4dbe2;         /* borders, dividers */
  --muted: #6e6169;        /* secondary text (AA on paper) */
  --success: #3f7a52;
  --on-ink: #f6f2ec;
  --on-ink-muted: #c9bcc6;

  /* Type: two families only */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Type scale (mobile). Desktop bumps the top end below. */
  --text-xs: 0.875rem;    /* 14 — smallest allowed, badges only */
  --text-sm: 0.9375rem;   /* 15 — meta, captions */
  --text-base: 1rem;      /* 16 — body, never smaller */
  --text-lg: 1.125rem;    /* 18 — lead text */
  --text-xl: 1.375rem;    /* 22 — card titles */
  --text-2xl: 1.75rem;    /* 28 — section titles */
  --text-3xl: 2.25rem;    /* 36 — page titles */
  --text-4xl: 2.75rem;    /* 44 — hero */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* Space scale (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --gutter: var(--space-4);
  --max: 1200px;
  --tap: 44px;              /* minimum touch target */
  --radius: 6px;
  --radius-lg: 12px;
  --shadow-sheet: 0 -8px 32px rgba(31, 20, 29, 0.18);

  /* Safe areas for phones with notches / home bars */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
    --text-2xl: 2rem;
    --text-3xl: 3rem;
    --text-4xl: 4rem;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.dhc {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: clip;               /* no sideways wobble on phones */
}
/* :where() keeps these base rules low-priority so components always win */
.dhc :where(img) { max-width: 100%; height: auto; display: block; }
.dhc :where(a) { color: inherit; }
.dhc :where(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.dhc :where(p) { margin: 0; text-wrap: pretty; }
.dhc :focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 3px; }
.dhc .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Site header (simple, shared) ---------- */
.site-top {
  position: sticky; top: 0; z-index: 30;
  background: var(--ink); color: var(--on-ink);
  padding-top: var(--safe-top);
}
.site-top__bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; gap: var(--space-4);
}
.site-top__brand {
  font-family: var(--font-display); font-size: var(--text-lg);
  text-decoration: none; letter-spacing: 0.04em;
}
.site-top__links { display: none; gap: var(--space-5); font-size: var(--text-sm); }
.site-top__links a { text-decoration: none; color: var(--on-ink-muted); }
.site-top__links a:hover, .site-top__links a[aria-current] { color: var(--on-ink); }
.site-top__login {
  min-height: 36px; display: inline-flex; align-items: center;
  padding: 0 var(--space-4); border: 1px solid var(--violet);
  border-radius: var(--radius); font-size: var(--text-sm); text-decoration: none;
}
@media (min-width: 900px) { .site-top__links { display: flex; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; text-align: center; line-height: 1.2; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-5);
  border-radius: var(--radius); border: 1px solid transparent;
  font: 500 var(--text-base)/1 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: var(--ink-soft); }
.btn--violet { background: var(--violet); color: var(--ink); }
.btn--violet:hover { background: #a985cc; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--on-ink); }
.on-ink .btn--ghost { color: var(--on-ink); border-color: var(--on-ink); }
.on-ink .btn--ghost:hover { background: var(--on-ink); color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }

/* ---------- Progress bar ---------- */
.progress { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--violet-deep); border-radius: inherit; }
.on-ink .progress { background: rgba(255,255,255,.18); }
.on-ink .progress > span { background: var(--violet); }

/* ---------- Product grid (Shopify collection style) ---------- */
.product-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-3);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-5); } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.product-card__media {
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--violet-wash);
  border-radius: var(--radius);
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__badge {
  position: absolute; top: var(--space-2); left: var(--space-2);
  background: var(--ink); color: var(--on-ink);
  font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: 99px;
}
.product-card__badge--violet { background: var(--violet); color: var(--ink); }
.product-card__title {
  font: 500 var(--text-base)/var(--leading-snug) var(--font-body);
  margin-top: var(--space-1);
}
.product-card__title a { text-decoration: none; }
.product-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is tappable */
.product-card__meta { font-size: var(--text-sm); color: var(--muted); }
.product-card__price { font-size: var(--text-base); }
.product-card__price--soft { color: var(--muted); }

/* ---------- Bands ---------- */
.band { padding: var(--space-8) 0; }
.band--ink { background: var(--ink); color: var(--on-ink); }
.band--wash { background: var(--violet-wash); }

@media (prefers-reduced-motion: reduce) {
  .dhc *, .dhc *::before, .dhc *::after { transition: none !important; animation: none !important; }
}

/* ---------- Mobile menu (no JavaScript needed) ---------- */
.site-menu { position: relative; }
.site-menu > summary {
  list-style: none; cursor: pointer;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center; margin-right: calc(var(--space-2) * -1);
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu__icon, .site-menu__icon::before, .site-menu__icon::after {
  display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
  position: relative; transition: transform .2s ease;
}
.site-menu__icon::before, .site-menu__icon::after { content: ""; position: absolute; left: 0; }
.site-menu__icon::before { top: -7px; }
.site-menu__icon::after { top: 7px; }
.site-menu[open] .site-menu__icon { background: transparent; }
.site-menu[open] .site-menu__icon::before { transform: translateY(7px) rotate(45deg); }
.site-menu[open] .site-menu__icon::after { transform: translateY(-7px) rotate(-45deg); }
.site-menu__panel {
  position: fixed; left: 0; right: 0; top: calc(56px + var(--safe-top)); bottom: 0;
  background: var(--ink); padding: var(--space-5) var(--gutter) calc(var(--space-7) + var(--safe-bottom));
  display: flex; flex-direction: column; overflow-y: auto;
}
.site-menu__panel a {
  font-family: var(--font-display); font-size: var(--text-2xl);
  text-decoration: none; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-menu__panel a[aria-current] { color: var(--violet); }
@media (min-width: 900px) { .site-menu { display: none; } }
.site-top__actions { display: flex; align-items: center; gap: var(--space-3); }

/* ---------- Footer (mobile-first: tidy two-column links) ---------- */
.site-foot {
  background: var(--ink); color: var(--on-ink-muted);
  padding: var(--space-7) 0 calc(var(--space-6) + var(--safe-bottom));
  font-size: var(--text-base);
}
.site-foot__inner { display: grid; gap: var(--space-6); }
.site-foot__brand { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--on-ink); line-height: 1.1; }
.site-foot nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); margin-top: var(--space-4); }
.site-foot nav a {
  text-decoration: none; min-height: var(--tap); display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.1); color: var(--on-ink);
}
.site-foot a:hover { color: var(--violet); }
.site-foot__social { display: flex; gap: var(--space-3); }
.site-foot__social a {
  width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--on-ink);
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%; text-decoration: none;
}
.site-foot__social svg { width: 20px; height: 20px; }
.site-foot .site-foot__inner + .wrap.wrap {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.1); font-size: var(--text-sm); color: var(--on-ink-muted);
}
/* Phones: centered footer */
@media (max-width: 767px) {
  .site-foot__inner { justify-items: center; text-align: center; }
  .site-foot nav { width: 100%; }
  .site-foot nav a { justify-content: center; }
  .site-foot__social { justify-content: center; }
  .site-foot .site-foot__inner + .wrap.wrap { text-align: center; }
}
@media (min-width: 768px) {
  .site-foot__inner { grid-template-columns: 1fr auto; align-items: end; }
  .site-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .site-foot nav a { border-bottom: 0; min-height: 32px; color: var(--on-ink-muted); }
}