/*
 * Trendzy Storefront Design Tokens
 * Shared CSS custom properties for checkout_success.html, checkout.html, product.html
 * Values match store.html / store_directory.html (single source of truth)
 *
 * Usage: <link rel="stylesheet" href="/static/css/storefront-tokens.css">
 * store.html and store_directory.html keep their inline :root (no extra request needed)
 */

:root {
  /* ── Surface colours ── */
  --bg:   #FAFAF8;
  --sf:   #FFFFFF;
  --sf2:  #F3F3EF;
  --sf3:  #E7E7E2;

  /* ── Border colours ── */
  --bd:   rgba(22,22,26,.08);
  --bd2:  rgba(22,22,26,.05);

  /* ── Text colours ── */
  --tx:   #16161A;
  --tx2:  #5A5A65;
  --tx3:  #9E9EA9;

  /* ── Accent (default indigo — overridden per-store via inline style on <html> or <body>) ── */
  --ac:   #3D52BF;
  --ac-d: #2E3F9A;

  /* ── Store accent alias (set per-store via inline style="--sa:#hexcolor") ── */
  --sa: var(--ac);

  /* ── Semantic: success ── */
  --ok:    #16a34a;
  --ok-bg: #f0fdf4;
  --ok-bd: #bbf7d0;

  /* ── Semantic: gold / reward ── */
  --gold:    #f59e0b;
  --gold-d:  #d97706;
  --gold-bg: #fffbeb;
  --gold-bd: #fde68a;
  --gold-tx: #92400e;

  /* ── Semantic: warning / error ── */
  --warn:    #c2410c;
  --warn-bg: #fff7ed;
  --warn-bd: #fed7aa;

  /* ── Touch target minimum ── */
  --touch: 44px;

  /* ── Spacing scale ── */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s8:  32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;

  /* ── Border radius ── */
  --r:      12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ── Shadows ── */
  --sh:   0 1px 4px rgba(22,22,26,.04), 0 8px 28px rgba(22,22,26,.04);
  --sh-h: 0 4px 20px rgba(22,22,26,.08), 0 24px 56px rgba(22,22,26,.06);
  --sh-f: 0 8px 40px rgba(22,22,26,.12);

  /* ── Transitions ── */
  --tf: 150ms cubic-bezier(.4,0,.2,1);
  --tb: 230ms cubic-bezier(.4,0,.2,1);
  --ts: 380ms cubic-bezier(.4,0,.2,1);

  /* ── Typography ── */
  --font-display: 'General Sans','Inter',-apple-system,sans-serif;
}

/* ── Screen-reader only utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Shared button base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--touch);
  padding: 0 var(--s5);
  border: none;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--tf), transform var(--tf);
  white-space: nowrap;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn:active { transform: none; opacity: 1; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--sa);
  color: #fff;
}
.btn-gold {
  background: var(--gold);
  color: #1a1a1a;
  box-shadow: 0 6px 24px rgba(245,158,11,.35);
}

/* ── Shared card ── */
.sf-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  box-shadow: var(--sh);
}

/* ── Code chip (coupon code display) ── */
.code-chip {
  display: inline-block;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--sf2);
  border: 2px dashed var(--bd);
  border-radius: var(--r);
  padding: 10px 16px;
  color: var(--tx);
}

/* ── Scroll reveal (matches store.html behaviour) ── */
[data-r] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--ts), transform var(--ts);
}
[data-r].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-r] { opacity: 1; transform: none; transition: none; }
}