/* ═══════════════════════════════════════════════════════════════════════════
   WYRR Design System — shared token + component library
   Served from wyrr.me/shared/wyrr-design-system.css
   Dark-first Apple-elegant Liquid Glass. All classes prefixed `wyrr-` so
   nothing collides with per-panel CSS. No external assets, no build step.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens: dark (default) ─────────────────────────────────────────────── */
:root {
  /* Gold scale — #D4AF37 core */
  --wyrr-gold:        #D4AF37;
  --wyrr-gold-bright: #F0D97C;
  --wyrr-gold-soft:   #E4C860;
  --wyrr-gold-deep:   #9C7E1E;
  --wyrr-gold-dark:   #6B5614;
  --wyrr-gold-10:     rgba(212, 175, 55, 0.10);
  --wyrr-gold-18:     rgba(212, 175, 55, 0.18);
  --wyrr-gold-30:     rgba(212, 175, 55, 0.30);
  --wyrr-gold-50:     rgba(212, 175, 55, 0.50);

  /* Surfaces */
  --wyrr-bg-0: #08070A;
  --wyrr-bg-1: #0D0C12;
  --wyrr-bg-2: #14121B;
  --wyrr-bg-3: #1C1926;

  /* Liquid Glass */
  --wyrr-glass-bg:        rgba(255, 255, 255, 0.055);
  --wyrr-glass-bg-strong: rgba(255, 255, 255, 0.09);
  --wyrr-glass-border:    rgba(255, 255, 255, 0.12);
  --wyrr-glass-highlight: rgba(255, 255, 255, 0.22);
  --wyrr-glass-blur:      blur(22px) saturate(160%);
  --wyrr-glass-blur-lite: blur(12px) saturate(140%);
  --wyrr-backdrop:        rgba(4, 3, 6, 0.55);

  /* Text hierarchy */
  --wyrr-text:       #F5F3EC;
  --wyrr-text-dim:   rgba(245, 243, 236, 0.62);
  --wyrr-text-faint: rgba(245, 243, 236, 0.38);
  --wyrr-text-on-gold: #17130A;

  /* Status */
  --wyrr-ok:     #58D68D;
  --wyrr-warn:   #E7B04B;
  --wyrr-danger: #E45B5B;
  --wyrr-info:   #6BB8E8;

  /* Radii */
  --wyrr-r-xs:   8px;
  --wyrr-r-sm:   12px;
  --wyrr-r-md:   16px;
  --wyrr-r-lg:   22px;
  --wyrr-r-xl:   28px;
  --wyrr-r-pill: 999px;

  /* Spacing scale */
  --wyrr-s-1: 4px;
  --wyrr-s-2: 8px;
  --wyrr-s-3: 12px;
  --wyrr-s-4: 16px;
  --wyrr-s-5: 24px;
  --wyrr-s-6: 32px;
  --wyrr-s-7: 48px;
  --wyrr-s-8: 64px;

  /* Shadows & glows */
  --wyrr-shadow-sm:   0 2px 10px rgba(0, 0, 0, 0.35);
  --wyrr-shadow-md:   0 8px 30px rgba(0, 0, 0, 0.45);
  --wyrr-shadow-lg:   0 18px 60px rgba(0, 0, 0, 0.55);
  --wyrr-glow-gold:   0 0 24px rgba(212, 175, 55, 0.35);
  --wyrr-glow-gold-lg: 0 0 44px rgba(212, 175, 55, 0.5);
  --wyrr-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* Typography — system stack, SF Pro first */
  --wyrr-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --wyrr-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --wyrr-fs-xs:   clamp(0.68rem, 0.65rem + 0.15vw, 0.75rem);
  --wyrr-fs-sm:   clamp(0.8rem,  0.76rem + 0.2vw,  0.875rem);
  --wyrr-fs-md:   clamp(0.95rem, 0.9rem + 0.25vw,  1.0625rem);
  --wyrr-fs-lg:   clamp(1.15rem, 1.05rem + 0.5vw,  1.375rem);
  --wyrr-fs-xl:   clamp(1.5rem,  1.3rem + 1vw,     2rem);
  --wyrr-fs-hero: clamp(2rem,    1.6rem + 2.2vw,   3.25rem);

  /* Motion */
  --wyrr-dur-fast:   140ms;
  --wyrr-dur-med:    280ms;
  --wyrr-dur-slow:   520ms;
  --wyrr-ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
  --wyrr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wyrr-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Tokens: light Liquid Glass ─────────────────────────────────────────── */
[data-wyrr-theme="light"] {
  --wyrr-bg-0: #F4F2EC;
  --wyrr-bg-1: #FBFAF6;
  --wyrr-bg-2: #FFFFFF;
  --wyrr-bg-3: #EFEBE0;

  --wyrr-glass-bg:        rgba(255, 255, 255, 0.55);
  --wyrr-glass-bg-strong: rgba(255, 255, 255, 0.75);
  --wyrr-glass-border:    rgba(60, 50, 20, 0.12);
  --wyrr-glass-highlight: rgba(255, 255, 255, 0.9);
  --wyrr-backdrop:        rgba(40, 34, 18, 0.28);

  --wyrr-text:       #17130A;
  --wyrr-text-dim:   rgba(23, 19, 10, 0.62);
  --wyrr-text-faint: rgba(23, 19, 10, 0.38);

  --wyrr-gold-deep: #8C6F14;

  --wyrr-shadow-sm: 0 2px 10px rgba(120, 100, 40, 0.10);
  --wyrr-shadow-md: 0 8px 30px rgba(120, 100, 40, 0.14);
  --wyrr-shadow-lg: 0 18px 60px rgba(120, 100, 40, 0.18);
  --wyrr-glow-gold: 0 0 24px rgba(212, 175, 55, 0.28);
  --wyrr-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* System preference honored when no explicit attribute is set */
@media (prefers-color-scheme: light) {
  :root:not([data-wyrr-theme]) {
    --wyrr-bg-0: #F4F2EC;
    --wyrr-bg-1: #FBFAF6;
    --wyrr-bg-2: #FFFFFF;
    --wyrr-bg-3: #EFEBE0;
    --wyrr-glass-bg:        rgba(255, 255, 255, 0.55);
    --wyrr-glass-bg-strong: rgba(255, 255, 255, 0.75);
    --wyrr-glass-border:    rgba(60, 50, 20, 0.12);
    --wyrr-glass-highlight: rgba(255, 255, 255, 0.9);
    --wyrr-backdrop:        rgba(40, 34, 18, 0.28);
    --wyrr-text:       #17130A;
    --wyrr-text-dim:   rgba(23, 19, 10, 0.62);
    --wyrr-text-faint: rgba(23, 19, 10, 0.38);
    --wyrr-gold-deep: #8C6F14;
    --wyrr-shadow-sm: 0 2px 10px rgba(120, 100, 40, 0.10);
    --wyrr-shadow-md: 0 8px 30px rgba(120, 100, 40, 0.14);
    --wyrr-shadow-lg: 0 18px 60px rgba(120, 100, 40, 0.18);
    --wyrr-glow-gold: 0 0 24px rgba(212, 175, 55, 0.28);
    --wyrr-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
}

/* ═══ Components ════════════════════════════════════════════════════════── */

/* Glass card */
.wyrr-glass-card {
  position: relative;
  background: var(--wyrr-glass-bg);
  -webkit-backdrop-filter: var(--wyrr-glass-blur);
  backdrop-filter: var(--wyrr-glass-blur);
  border: 1px solid var(--wyrr-glass-border);
  border-radius: var(--wyrr-r-lg);
  box-shadow: var(--wyrr-shadow-md), var(--wyrr-inner-light);
  color: var(--wyrr-text);
  padding: var(--wyrr-s-5);
  font-family: var(--wyrr-font);
  transition: transform var(--wyrr-dur-med) var(--wyrr-ease-out),
              box-shadow var(--wyrr-dur-med) var(--wyrr-ease-out),
              border-color var(--wyrr-dur-med) var(--wyrr-ease);
}
.wyrr-glass-card:hover {
  border-color: var(--wyrr-gold-30);
  box-shadow: var(--wyrr-shadow-lg), var(--wyrr-glow-gold), var(--wyrr-inner-light);
}

/* Glass pill */
.wyrr-glass-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wyrr-s-2);
  background: var(--wyrr-glass-bg);
  -webkit-backdrop-filter: var(--wyrr-glass-blur-lite);
  backdrop-filter: var(--wyrr-glass-blur-lite);
  border: 1px solid var(--wyrr-glass-border);
  border-radius: var(--wyrr-r-pill);
  padding: var(--wyrr-s-2) var(--wyrr-s-4);
  color: var(--wyrr-text);
  font-family: var(--wyrr-font);
  font-size: var(--wyrr-fs-sm);
  box-shadow: var(--wyrr-shadow-sm), var(--wyrr-inner-light);
}

/* Buttons */
.wyrr-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wyrr-s-2);
  border: 1px solid transparent;
  border-radius: var(--wyrr-r-pill);
  padding: 12px 22px;
  font-family: var(--wyrr-font);
  font-size: var(--wyrr-fs-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  transition: transform var(--wyrr-dur-fast) var(--wyrr-ease-spring),
              box-shadow var(--wyrr-dur-med) var(--wyrr-ease),
              background var(--wyrr-dur-med) var(--wyrr-ease),
              opacity var(--wyrr-dur-fast) var(--wyrr-ease);
  background: linear-gradient(160deg, var(--wyrr-gold-bright), var(--wyrr-gold) 55%, var(--wyrr-gold-deep));
  color: var(--wyrr-text-on-gold);
  box-shadow: var(--wyrr-shadow-sm), var(--wyrr-glow-gold);
}
.wyrr-btn:hover { box-shadow: var(--wyrr-shadow-md), var(--wyrr-glow-gold-lg); }
.wyrr-btn:active { transform: scale(0.96); opacity: 0.92; }
.wyrr-btn:focus-visible { outline: 2px solid var(--wyrr-gold); outline-offset: 3px; }
.wyrr-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.wyrr-btn--ghost {
  background: var(--wyrr-glass-bg);
  -webkit-backdrop-filter: var(--wyrr-glass-blur-lite);
  backdrop-filter: var(--wyrr-glass-blur-lite);
  border-color: var(--wyrr-glass-border);
  color: var(--wyrr-text);
  box-shadow: var(--wyrr-shadow-sm), var(--wyrr-inner-light);
}
.wyrr-btn--ghost:hover { border-color: var(--wyrr-gold-30); box-shadow: var(--wyrr-shadow-sm), var(--wyrr-glow-gold); }

.wyrr-btn--danger {
  background: linear-gradient(160deg, #F08787, var(--wyrr-danger) 55%, #A93838);
  color: #FFF6F2;
  box-shadow: var(--wyrr-shadow-sm), 0 0 24px rgba(228, 91, 91, 0.30);
}
.wyrr-btn--danger:hover { box-shadow: var(--wyrr-shadow-md), 0 0 40px rgba(228, 91, 91, 0.45); }

/* Bottom sheet */
.wyrr-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147482800;
  max-height: min(86vh, 86dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--wyrr-glass-bg-strong);
  -webkit-backdrop-filter: var(--wyrr-glass-blur);
  backdrop-filter: var(--wyrr-glass-blur);
  border: 1px solid var(--wyrr-glass-border);
  border-bottom: none;
  border-radius: var(--wyrr-r-xl) var(--wyrr-r-xl) 0 0;
  box-shadow: var(--wyrr-shadow-lg), var(--wyrr-inner-light);
  color: var(--wyrr-text);
  font-family: var(--wyrr-font);
  padding: var(--wyrr-s-5);
  padding-bottom: calc(var(--wyrr-s-5) + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  transition: transform var(--wyrr-dur-slow) var(--wyrr-ease-out);
  will-change: transform;
}
.wyrr-sheet.is-open { transform: translateY(0); }
.wyrr-sheet::before {
  content: "";
  display: block;
  width: 44px; height: 5px;
  margin: 0 auto var(--wyrr-s-4);
  border-radius: var(--wyrr-r-pill);
  background: var(--wyrr-text-faint);
}
.wyrr-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147482799;
  background: var(--wyrr-backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wyrr-dur-med) var(--wyrr-ease);
}
.wyrr-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Toast */
.wyrr-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483001;
  transform: translate(-50%, 20px) scale(0.95);
  opacity: 0;
  max-width: min(92vw, 420px);
  display: flex;
  align-items: center;
  gap: var(--wyrr-s-3);
  background: var(--wyrr-glass-bg-strong);
  -webkit-backdrop-filter: var(--wyrr-glass-blur);
  backdrop-filter: var(--wyrr-glass-blur);
  border: 1px solid var(--wyrr-glass-border);
  border-radius: var(--wyrr-r-md);
  box-shadow: var(--wyrr-shadow-lg), var(--wyrr-inner-light);
  color: var(--wyrr-text);
  font-family: var(--wyrr-font);
  font-size: var(--wyrr-fs-sm);
  padding: var(--wyrr-s-3) var(--wyrr-s-4);
  pointer-events: none;
  transition: transform var(--wyrr-dur-med) var(--wyrr-ease-spring),
              opacity var(--wyrr-dur-med) var(--wyrr-ease);
}
.wyrr-toast.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; }
.wyrr-toast--success { border-color: rgba(88, 214, 141, 0.4); }
.wyrr-toast--error   { border-color: rgba(228, 91, 91, 0.45); }
.wyrr-toast--gold    { border-color: var(--wyrr-gold-50); box-shadow: var(--wyrr-shadow-lg), var(--wyrr-glow-gold); }
.wyrr-toast__dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wyrr-gold);
}
.wyrr-toast--success .wyrr-toast__dot { background: var(--wyrr-ok); }
.wyrr-toast--error   .wyrr-toast__dot { background: var(--wyrr-danger); }

/* Chip */
.wyrr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--wyrr-glass-border);
  border-radius: var(--wyrr-r-pill);
  background: var(--wyrr-glass-bg);
  color: var(--wyrr-text-dim);
  font-family: var(--wyrr-font);
  font-size: var(--wyrr-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all var(--wyrr-dur-fast) var(--wyrr-ease);
}
.wyrr-chip:hover { color: var(--wyrr-text); border-color: var(--wyrr-gold-30); }
.wyrr-chip.is-active,
.wyrr-chip[aria-pressed="true"] {
  color: var(--wyrr-gold-bright);
  border-color: var(--wyrr-gold-50);
  background: var(--wyrr-gold-10);
  box-shadow: var(--wyrr-glow-gold);
}

/* Input */
.wyrr-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  background: var(--wyrr-glass-bg);
  -webkit-backdrop-filter: var(--wyrr-glass-blur-lite);
  backdrop-filter: var(--wyrr-glass-blur-lite);
  border: 1px solid var(--wyrr-glass-border);
  border-radius: var(--wyrr-r-sm);
  color: var(--wyrr-text);
  font-family: var(--wyrr-font);
  font-size: var(--wyrr-fs-md);
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--wyrr-dur-med) var(--wyrr-ease),
              box-shadow var(--wyrr-dur-med) var(--wyrr-ease);
}
.wyrr-input::placeholder { color: var(--wyrr-text-faint); }
.wyrr-input:focus {
  border-color: var(--wyrr-gold-50);
  box-shadow: 0 0 0 3px var(--wyrr-gold-18), var(--wyrr-glow-gold);
}

/* Skeleton shimmer */
.wyrr-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--wyrr-glass-bg);
  border-radius: var(--wyrr-r-sm);
  min-height: 1em;
  color: transparent !important;
}
.wyrr-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--wyrr-glass-highlight), transparent);
  animation: wyrr-shimmer 1.6s var(--wyrr-ease) infinite;
}
@keyframes wyrr-shimmer { 100% { transform: translateX(100%); } }

/* Badge */
.wyrr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--wyrr-r-pill);
  padding: 3px 10px;
  font-family: var(--wyrr-font);
  font-size: var(--wyrr-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--wyrr-gold-10);
  border: 1px solid var(--wyrr-gold-30);
  color: var(--wyrr-gold-bright);
}
.wyrr-badge--ok     { background: rgba(88, 214, 141, 0.10); border-color: rgba(88, 214, 141, 0.35); color: var(--wyrr-ok); }
.wyrr-badge--danger { background: rgba(228, 91, 91, 0.10);  border-color: rgba(228, 91, 91, 0.38);  color: var(--wyrr-danger); }
.wyrr-badge--info   { background: rgba(107, 184, 232, 0.10); border-color: rgba(107, 184, 232, 0.35); color: var(--wyrr-info); }

/* Divider */
.wyrr-divider {
  border: none;
  height: 1px;
  margin: var(--wyrr-s-5) 0;
  background: linear-gradient(90deg, transparent, var(--wyrr-glass-border) 20%, var(--wyrr-gold-30) 50%, var(--wyrr-glass-border) 80%, transparent);
}

/* Scroll reveal (pairs with WYRR_DS.revealInit) */
.wyrr-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--wyrr-dur-slow) var(--wyrr-ease-out),
              transform var(--wyrr-dur-slow) var(--wyrr-ease-out);
  will-change: opacity, transform;
}
.wyrr-reveal.is-visible { opacity: 1; transform: none; }

/* Amount styling helper (pairs with WYRR_DS.formatWYRR) */
.wyrr-amount {
  font-family: var(--wyrr-font);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wyrr-gold-bright);
  text-shadow: 0 0 18px var(--wyrr-gold-30);
}

/* Press feedback (pairs with [data-wyrr-press] helper in JS) */
[data-wyrr-press] {
  transition: transform var(--wyrr-dur-fast) var(--wyrr-ease-spring),
              opacity var(--wyrr-dur-fast) var(--wyrr-ease);
  -webkit-tap-highlight-color: transparent;
}
[data-wyrr-press].wyrr-pressed { transform: scale(0.96); opacity: 0.9; }

/* Safe-area helpers */
.wyrr-safe-bottom { padding-bottom: calc(var(--wyrr-s-4) + env(safe-area-inset-bottom, 0px)); }
.wyrr-safe-top    { padding-top: calc(var(--wyrr-s-4) + env(safe-area-inset-top, 0px)); }
.wyrr-safe-x {
  padding-left: calc(var(--wyrr-s-4) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--wyrr-s-4) + env(safe-area-inset-right, 0px));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wyrr-glass-card, .wyrr-btn, .wyrr-sheet, .wyrr-sheet-backdrop, .wyrr-toast,
  .wyrr-chip, .wyrr-input, .wyrr-reveal, [data-wyrr-press] {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .wyrr-reveal { opacity: 1; transform: none; }
  .wyrr-skeleton::after { animation: none; }
}