/* ============================================================
   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;
}

/* ── Public profile — premium polish (FOLLOWS THE USER'S THEME, not a fixed color) ──
   All hover/focus tints use var(--brand, #7c3aed) so a green/orange/etc theme stays on-brand
   without leftover violet showing on hover. profile.php's :root sets --brand = accent_color. */
.link-themed {
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease, background .25s ease !important;
  border: 1px solid rgba(255,255,255,.07);
}
.link-themed:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand, #7c3aed) 35%, transparent) !important;
}
.link-themed:active { transform: translateY(0); }

/* Avatar: hairline ring in the user's theme color (no fixed violet). */
.avatar-themed {
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #7c3aed) 20%, transparent);
}
.avatar-themed:hover { transform: scale(1.03); }

/* Buttons: motion only, no glow. */
.btn-bounce { transition: transform .18s cubic-bezier(.16,1,.3,1); }

/* Remove the mobile tap highlight + browser focus halo on all interactive elements
   so a press never produces a bright overlay over icons (a common cause of perceived "glow"). */
a, button, [role="button"], summary, .link-themed { -webkit-tap-highlight-color: transparent; }
button:focus, a:focus, button:focus-visible, a:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand, #7c3aed) 55%, transparent); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* Accessibility: respect reduced motion. */
/* NOTE: the global prefers-reduced-motion clamp was removed deliberately.
   The owner's OS has reduce-motion ON, and it was zeroing every transition
   on the dashboard + profile while the landing (no clamp) stayed animated —
   making the pages feel like different systems. Owner preference: animate. */