/* ============================================================
   Unylinks Design System — single source of truth for the UI.
   Load this BEFORE page styles. Use the tokens (var(--uny-*))
   instead of hardcoded values so a change here flows everywhere.
   ============================================================ */
:root {
  /* ── Brand ─────────────────────────────────── */
  --uny-brand:        #7c3aed;   /* primary purple */
  --uny-brand-600:    #6d28d9;
  --uny-brand-700:    #5b21b6;
  --uny-brand-glow:   rgba(124, 58, 237, 0.40);
  --uny-kick:         #53fc18;
  --uny-danger:       #ef4444;
  --uny-success:      #22c55e;
  --uny-warning:      #f59e0b;

  /* ── Surfaces (dark theme) ─────────────────── */
  --uny-bg:           #050505;
  --uny-bg-1:         #0f0f0f;
  --uny-bg-2:         #161616;
  --uny-bg-3:         #1f1f1f;
  --uny-glass:        rgba(255, 255, 255, 0.05);
  --uny-glass-brd:    rgba(255, 255, 255, 0.10);

  /* ── Text ──────────────────────────────────── */
  --uny-t1:           #ffffff;   /* primary */
  --uny-t2:           #b9b9b9;   /* secondary */
  --uny-t3:           #7a7a7a;   /* muted */

  /* ── Tier colors (verification) ───────────── */
  --uny-tier-black:   #111827;
  --uny-tier-gold:    #f5c518;
  --uny-tier-silver:  #c0c0c0;
  --uny-tier-bronze:  #b87333;
  --uny-tier-red:     #dc2626;

  /* ── Radii ─────────────────────────────────── */
  --uny-r-sm:  8px;
  --uny-r-md:  12px;
  --uny-r-lg:  16px;
  --uny-r-xl:  24px;
  --uny-r-pill: 999px;

  /* ── Spacing scale (4px base) ──────────────── */
  --uny-s-1: 4px;  --uny-s-2: 8px;  --uny-s-3: 12px;
  --uny-s-4: 16px; --uny-s-6: 24px; --uny-s-8: 32px; --uny-s-12: 48px;

  /* ── Typography ────────────────────────────── */
  --uny-font: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --uny-fs-xs: 11px; --uny-fs-sm: 13px; --uny-fs-md: 15px;
  --uny-fs-lg: 18px; --uny-fs-xl: 24px; --uny-fs-2xl: 32px;

  /* ── Elevation ─────────────────────────────── */
  --uny-shadow-1: 0 4px 16px rgba(0,0,0,0.25);
  --uny-shadow-2: 0 8px 32px rgba(0,0,0,0.37);
  --uny-shadow-brand: 0 8px 24px var(--uny-brand-glow);

  /* ── Motion ────────────────────────────────── */
  --uny-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --uny-dur: 0.25s;
}

/* Reusable primitives — opt-in classes that match the brand. */
.uny-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--uny-s-2);
  background: var(--uny-brand); color: #fff; border: none;
  border-radius: var(--uny-r-md); padding: 12px 20px;
  font-family: var(--uny-font); font-weight: 700; font-size: var(--uny-fs-sm);
  cursor: pointer; transition: transform var(--uny-dur) var(--uny-ease), background var(--uny-dur);
}
.uny-btn:hover { background: var(--uny-brand-600); transform: translateY(-1px); }
.uny-btn:active { transform: translateY(0); }
.uny-btn--ghost { background: var(--uny-glass); border: 1px solid var(--uny-glass-brd); }

.uny-card {
  background: var(--uny-glass); border: 1px solid var(--uny-glass-brd);
  border-radius: var(--uny-r-lg); box-shadow: var(--uny-shadow-2);
  backdrop-filter: blur(20px);
}

.uny-badge {
  display: inline-flex; align-items: center; gap: var(--uny-s-1);
  border-radius: var(--uny-r-pill); padding: 4px 10px;
  font-size: var(--uny-fs-xs); font-weight: 700;
}

/* Accessibility: respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}