/* ShenYuan Global Brand Tokens v1.0
   Shared across all market landing pages.
   Market-specific overrides live in each page's <style>.
   Rule: these define the MINIMUM shared brand language.
*/

:root {
  /* Core gold — one value everywhere */
  --sy-gold:        #c9a84c;
  --sy-gold-light:  #e8d08a;
  --sy-gold-deep:   #8a6420;
  --sy-gold-glow:   rgba(201, 168, 76, 0.28);
  --sy-gold-pale:   rgba(201, 168, 76, 0.10);
  --sy-gold-border: rgba(201, 168, 76, 0.25);

  /* Jade accent — universal secondary */
  --sy-jade:        #5bbfa0;
  --sy-jade-deep:   #3a9678;
  --sy-jade-pale:   rgba(91, 191, 160, 0.10);
  --sy-jade-border: rgba(91, 191, 160, 0.22);

  /* Radii */
  --sy-radius:    14px;
  --sy-radius-sm:  8px;
  --sy-radius-btn: 50px;

  /* Motion */
  --sy-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --sy-dur:       0.18s;

  /* Z-stack */
  --sy-z-sticky: 50;
  --sy-z-modal:  200;
}

/* ── Shared CTA button ───────────────────────────────────── */
.sy-btn-primary {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--sy-gold), var(--sy-gold-deep));
  color: #000;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 24px;
  border-radius: var(--sy-radius-btn);
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 24px var(--sy-gold-glow);
  transition: transform var(--sy-dur) var(--sy-ease),
              box-shadow var(--sy-dur) var(--sy-ease);
  -webkit-tap-highlight-color: transparent;
}
.sy-btn-primary:hover,
.sy-btn-primary:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.45);
}
.sy-btn-primary:active {
  transform: translateY(0);
}

/* ── Secondary / ghost button ───────────────────────────── */
.sy-btn-ghost {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--sy-gold);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--sy-radius-btn);
  border: 1px solid var(--sy-gold-border);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background var(--sy-dur), border-color var(--sy-dur);
  -webkit-tap-highlight-color: transparent;
}
.sy-btn-ghost:hover { background: var(--sy-gold-pale); border-color: var(--sy-gold); }

/* ── Gold divider line ──────────────────────────────────── */
.sy-gold-line {
  width: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sy-gold), transparent);
  margin: 0 auto;
  border: none;
}

/* ── Brand mark ─────────────────────────────────────────── */
.sy-brand-mark {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sy-gold);
  opacity: 0.85;
}

/* ── Trust badge row ────────────────────────────────────── */
.sy-trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sy-trust-item {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.75;
}
.sy-trust-item strong { color: var(--sy-gold); opacity: 1; }

/* ── Gold shimmer animation ─────────────────────────────── */
@keyframes sy-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.sy-shimmer-text {
  background: linear-gradient(90deg,
    var(--sy-gold-deep) 0%,
    var(--sy-gold-light) 40%,
    var(--sy-gold-deep) 80%
  );
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sy-shimmer 3s linear infinite;
}

/* ── Share button ───────────────────────────────────────── */
.sy-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sy-gold-pale);
  border: 1px solid var(--sy-gold-border);
  border-radius: 30px;
  padding: 10px 20px;
  color: var(--sy-gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--sy-dur);
}
.sy-share-btn:hover { background: rgba(201,168,76,0.18); }

/* ── Sticky bottom CTA bar ──────────────────────────────── */
.sy-sticky-cta {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 440px;
  padding: 12px 20px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 60%, transparent);
  z-index: var(--sy-z-sticky);
}

/* ── Form input shared style ────────────────────────────── */
.sy-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--sy-gold-border);
  border-radius: var(--sy-radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color var(--sy-dur);
}
.sy-input:focus { border-color: var(--sy-gold); }

/* Light-bg pages get different input style */
@media (prefers-color-scheme: light) {
  .sy-input {
    background: rgba(0,0,0,0.04);
    color: inherit;
  }
}